jquery - 如果存在错误，则阻止表单提交 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;
    }
}