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

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