如果错误存在带有.change()的ajax .submit(),则阻止提交表单

时间:2019-06-13 10:09:44

标签: jquery ajax validation submit

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

1 个答案:

答案 0 :(得分: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;
    }
}