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

【问题标题】：Prevent form from submission if error exists ajax .submit() with .change()如果存在错误，则防止表单提交 ajax .submit() 和 .change()
【发布时间】：2019-10-27 21:52:16
【问题描述】：

所以我对 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");
   }
  });
 });

【问题讨论】：

您似乎有一些代码可以检查电子邮件是否可用。这是更改 ajax 调用。假设您有一个提交电子邮件的按钮，那么它们没有理由发生冲突，或者正如您所说，“同时使用 .change 和 .submit”。您不要同时使用它们，您使用 change 进行检查，然后使用 submit 提交（或者如果您想要 ajax 提交，请单击按钮）。

标签： jquery ajax validation submit

【解决方案1】：

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

对于提交，它是用户尝试提交表单时对元素的一个事件。
对于change，当元素值change时触发一个事件。

来源：
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;
    }
}

【讨论】：

你的意思是像这样$("#email").change(function() { $("registerCompany").on('submit', function (e) { if($('.object_error').length > 0){ e.preventDefault(); return false; }
@ZeeshanAli 您可以将更改事件放在分号后面。 $("#email").change(function() { //statement}); $("form").on('submit', function (e) {//statement});他们都是不同的事件。一个是当你在电子邮件字段中输入任何内容时触发，当你按下提交按钮时触发提交事件
如果存在错误，它会阻止表单提交，但是当我们纠正这些错误时，它不会解除绑定提交按钮，我使用了 $("registerCompany").on('submit', function (e) { if($('.object_error').length > 0){ e.preventDefault(); return false; } else{ $(this).unbind('submit').submit(); } }); 之类的代码，但它不起作用
为什么要解绑提交事件？应该删除 object_error 类，所以如果在表单中没有找到 object_error 类。它将继续提交
一旦我输入了不正确的数据，代码就会阻止我提交表单，但是在我用正确的数据更新后它仍然不允许我提交表单..我使用 unbind 只是为了尝试但它也没有工作