JQuery.Validate插件可以阻止提交Ajax表单

我正在使用JQuery表单插件（ http://malsup.com/jquery/form/ ）来处理表单的ajax提交。 我也插入了JQuery.Validate（ http://docs.jquery.com/Plugins/Validation ）进行客户端validation。

我所看到的是，当我预期validation时，validation失败，但它不会阻止表单提交。 当我使用传统forms（即非ajax）时，validation失败阻止了提交表单….这是我想要的行为。

我知道validation是正确连接的，因为validation消息仍然在ajax提交发生后出现。

那么我错过了什么阻止了我想要的行为呢？ 以下示例代码….

   
 
 
  var options = { target: '#detailsView' }; $('#searchForm').ajaxForm(options); $('#searchForm').validate({ rules: { username: {required:true}}, messages: { username: {required:"Username is a required field."}} });  

Answer 1

在初始化ajaxForm（）时，需要添加一个与beforeSubmit事件一起使用的回调函数：

 var options = { beforeSubmit: function() { return $('#searchForm').validate().form(); }, target: '#detailsView' }; 

现在它知道在提交页面之前检查validation结果。

Answer 2

……好吧已经有一段时间了，所以我的情况有所改变。 目前我有一个传递给Validate（）插件的submitHandler选项。 在那个处理程序中，我手动使用ajaxSubmit。 我想是更多的解决方法而不是答案。 希望有所帮助。

http://jquery.bassistance.de/validate/demo/ajaxSubmit-intergration-demo.html

 var v = jQuery("#form").validate({ submitHandler: function(form) { jQuery(form).ajaxSubmit({target: "#result"}); } }); 

Answer 3

 $('#contactform').ajaxForm({ success : FormSendResponse, beforeSubmit: function(){ return $("#contactform").valid(); } }); $("#contactform").validate(); 

以上代码对我来说很好。

Answer 4

还要确保所有输入字段都具有“name”属性以及“id”属性。 我注意到没有这些，jqueryvalidation插件无法正常运行。

Answer 5

好的，这是一个古老的问题，但我会把我们的解决方案放在这里给后人。 我个人认为这是一个黑客行为，但至少它不是一个hack-tacu-manjaro

Answer 6

就像第一关，我想知道为什么这条线

 $("form").validate({ 

不是指$（“searchform”）。 我没有看过这个，或尝试过，但这似乎是一个不匹配。 您不想在适当的表单上调用validate吗？

无论如何，如果这是完全错误的，那么错误并不是立即显而易见的。 🙂

Answer 7

可能是一个假的回报; 在表格上会有帮助吗？ ：） 我的意思是：