防止表单提交无效的电子邮件地址

Question

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

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

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

执行验证的代码sn-p：

<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也可以。