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

Posted 2023-05-09

【中文标题】如果存在错误，则防止表单提交 ajax .submit() 和 .change()

【英文标题】：Prevent form from submission if error exists ajax .submit() with .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 提交，请单击按钮）。

【参考方案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 只是为了尝试但它也没有工作