2012-08-17 32 views
0

我在表单中使用Jquery验证,并在.on(提交)代码中使用Ajax函数。jquery验证然后.onsubmit函数

问题是,即使验证错误,.on(提交)功能仍在运行。

是否有任何类型的“如果验证成功”代码添加到验证代码以将.on(提交)代码放入,以便它只在表单正确和验证后才运行?

这是。对(提交)功能

 $('#valform').on('submit', function (e){ 
    e.preventDefault(); 
    $.ajax({ 
    type: "POST", 
    url: "<?php echo MAXINBOUND_PLUGIN_URL ?>/php/localProxy.php", 
    data: $('#valform').serialize(), 
    success: function (response) { 
      alert('Great!'); 
      // do something! 
    }, 
    error: function() { 
      alert('There was a problem!'); // handle error 
    } 
     }); 
     }); 

,这是验证码

$("#valform").validate({ 
    invalidHandler: function(form, validator) { 
     success: function (response) { 
     var errors = validator.numberOfInvalids(); 

     if (errors) { 
      $("#error-message").show().text("Please correct the required field(s)"); 
     } else { 
      $("#error-message").hide(); 
     } 
    }, 
    messages: { 
     agree: { 
      required: "" 
     }, 
     phone1: { 
      required: "" 
     }, 
     address1: { 
      required: "" 
      }, 
    }, 
    rules: { 
     agree: { 
      required: true, 
     }, 
     phone1: { 
      required: true, 
      phoneUS: true 
     }, 
     Address1: { 
      required: true, 
      addr: true, 
      }, 

     }, 

    }); 

回答

1

可以使用jquery valid() method检查提交的表单是有效的。事情是这样的......

if ($("#valform").valid()) { 
    // do your ajax stuff 
} 

请注意,有效()当的validate()被调用之前,它的形式才会工作。

希望这会有所帮助!

+0

这个工作原理除了自动验证表单权之前页面加载之前甚至可以输入任何信息 – user1532944 2012-08-17 03:23:50

+0

嗯。你可以请你的代码在jsFiddle或类似的?谢谢。 – neo108 2012-08-17 04:14:36

3

您可以使用submitHandler来做ajax调用。所以它只会在通过所有验证后才会调用。

$("#valform").validate({ 
    submitHandler: function(form) { 
    //do ajax call 
    } 
})