如果存在错误 ajax .submit() 和 .change()，则阻止表单提交

Question

所以我在jQuery/ajax代码上遇到了这个问题。每当字段更改时，我都使用了.change方法。它显示输出，无论该电子邮件是否已被接收或输入字段为空。我知道有.submit方法和preventDefault()，但我对此很陌生，我对如何同时使用.change.submit感到困惑。

pic1 = new Image(20, 20);
pic1.src="images/abc.jpg";
$(document).ready(function(){
function isValidEmail(emailAddress) {
// some regular expressions for email  format validation
};
$("#email").change(function() {
var email = $("#email").val();
if(isValidEmail(email)){
$("#status").html('<img 
style="width:17px;"src="images/abc.jpg" align="absmiddle">&nbsp;Checking availability...');
$.ajax({ 
type: "POST", 
url: "check.php", 
data: "email="+ email,
dataType: 'text',
success: function(msg){
if(msg == 'OK'){
//alert ("success");
$("#email").removeClass('object_error'); // if necessary
$("#email").addClass("object_ok");
$("#status").html('&nbsp;<img src="tick2.gif" 
align="left"><p><strong style="color:green">This email is available</strong></p>');
} else {
//alert ("error");
$("#email").removeClass('object_ok'); // if necessary
$("#email").addClass("object_error");
$("#status").html(msg);
}
}
});
} else {
$("#status").html('<font color="red">' + 'Enter Valid 
Email</font>');
$("#email").removeClass('object_ok'); // if necessary
$("#email").addClass("object_error");
}
});
});

Answer 1

它们都是事件，但 对于更改和提交，它们的行为有所不同。
它们不会同时触发。

对于提交，它是用户尝试提交表单时元素的事件。
对于更改，它是元素值更改时的事件触发器。

源：
1. https://api.jquery.com/submit/
2. https://api.jquery.com/change/

如果要停止默认行为，可以在更改事件期间检查添加的类 (object_error) 类。

$("form").on('submit', function (e) {
if($('.object_error').length > 0){
e.preventDefault();  
return false;
}
}