javascript - 防止因电子邮件地址无效而提交表单

Question

我正在使用这个工具: https://www.edq.com/real-time-email-validation/

...验证电子邮件地址是否确实存在。

该工具工作正常，但即使验证失败，用户仍然可以提交表单。我需要在代码中添加什么，以便在用户输入无效的电子邮件地址时不允许他们提交表单？

执行验证的代码片段:

<script type="text/javascript">

        var $plugin = new emailValidation(              
          $( "#email"), {
            token: "[hidden]",
            proxyPath:  "[hidden]",
            featureVersion:  "1.0" ,
            timeout: 10000,
            inlineMode: true,
            showLoading: true,
            onSuccess: function (data) {
            // onSuccess callback implementation
            },
            onError: function (jqXHR, status, errThrown) {

            },
            messages: {
                emptyEmail:  "Please enter email.",
                error:  "Please contact Experian QAS support.",
                timeout:  "Timeout.",
                success: "yay!"
            },
            styles: {
                success: "success",
                successInline: "success-inline",
                error: "error",
                errorInline: "error-inline",
                loading: "loading",
                correctionEmail: "correctionEmail",
                emailPicklistHeader: "emailPicklistHeader",
                emailPicklist: "emailPicklist",
                picklistItem: "picklistItem",
                picklistItemText: "picklistItemText",
                closeButton: "closeButton",
            }
          }
      );


        </script> 

Answer 1

关键在于小部件事件:onSuccess 和 onError。使用它们，您可以通过多种方式做到这一点，例如:

1. 禁用提交按钮:

   onSuccess: function (data) {
       $('#mySubmit').prop("disabled", null);
   },
   onError: function (jqXHR, status, errThrown) {
       $('#mySubmit').prop("disabled", "disabled");
   }
   

2. 阻止表单提交:

   onSuccess: function (data) {
       $('#myForm').data("email-ok", true);
   },
   onError: function (jqXHR, status, errThrown) {
       $('#myForm').data("email-ok", false);
   }
   
   // On form
   $("#myForm").on("submit", function(e) {
       if (!$(this).data("email-ok")) {
           e.preventDefault();
           // show an error message 
       }
   });
   

在这两种情况下，您都必须等待服务的响应，然后管理您的表单。我认为选项 #2 更好，但选项 #1 也可以。