Jquery.validate – 一个页面 – 多个表单，一个提交ok，其他没有

在我的页面上，我有3个完整的表单，每个表单都有自己的提交按钮，每个表单和按钮都有不同的ID。

 ...  Submit 
 
 ...  Submit 
 
 ...  Submit  

在javascript中，我对每个提交按钮都有以下逻辑：

 $.validator.setDefaults({ debug:true, errorElement: 'span', //default input error message container errorClass: 'help-inline', // default input error message class focusInvalid: false, // do not focus the last invalid input) highlight: function (element) { // hightlight error inputs $(element).closest('.control-group').addClass('error'); // set error class to the control group }, unhighlight: function (element) { // revert the change dony by hightlight $(element) .closest('.control-group').removeClass('error'); // set error class to the control group } }); $(function() { var formA = $('#formA'); // init validator obj and set the rules formA.validate({ rules: { ... } }); formA.submit(function () { return formA.valid(); }); var formB = $('#formB'); // init validator obj and set the rules formB.validate({ rules: { ... } }); formB.submit(function () { return formB.valid(); }); var formC = $('#formC'); // init validator obj and set the rules formC.validate({ rules: { ... } }); formC.submit(function () { return formC.valid(); }); }); 

提交第一个表单的工作正常，但对其他两个表单不起作用。 我用DOMLint检查了html索引，没有问题。 触发Click事件，表单有效，提交返回true，但不提交。

validation工作正常，仅validation提交的表单。

如何对每个表单应用不同的规则？

可能的方案

 $.validator.setDefaults({ debug:true, errorElement: 'span', //default input error message container errorClass: 'help-inline', // default input error message class focusInvalid: false, // do not focus the last invalid input) highlight: function (element) { // hightlight error inputs $(element).closest('.control-group').addClass('error'); // set error class to the control group }, unhighlight: function (element) { // revert the change dony by hightlight $(element) .closest('.control-group').removeClass('error'); // set error class to the control group }, submitHandler: function (form) { if ($(form).valid()) { form.submit(); } } }); $(function() { var formA = $('#formA'); // init validator obj and set the rules formA.validate({ rules: { ... } }); var formB = $('#formB'); // init validator obj and set the rules formB.validate({ rules: { ... } }); var formC = $('#formC'); // init validator obj and set the rules formC.validate({ rules: { ... } }); }); 

添加提交处理程序，返回提交事件。

Answer 1

引用OP：

触发Click事件，表单有效，提交返回true， 但不提交 。

debug: true选项将阻止实际submit ……这就是它的用途。 根据文件 ，

调试 ：
启用调试模式。 如果为true，则表单未提交且控制台上显示某些错误（需要Firebug或Firebug lite）。

删除debug选项后，您的代码工作正常： http ： //jsfiddle.net/9WrSH/1/

---

引用OP：

如何对每个表单应用不同的规则？

只需在每个表单的.validate()函数内声明不同的规则。

 $('#myform1').validate({ rules: { myfield1: { required: true, minlength: 3 }, myfield2: { required: true, email: true } } }); 

见： http ： //jsfiddle.net/9WrSH/1/

---

你不需要这些：

 formA.submit(function () { return formA.valid(); }); 

该插件已经捕获了submit按钮并自动检查表单，因此无需外部处理事件。

---

您不需要在submitHandler进行条件检查或submit() ：

 submitHandler: function (form) { // if ($(form).valid()) { // form.submit(); // } } 

• 该插件仅在有效表单上触发submitHandler回调，因此无需检查有效性。

• 该插件在有效时自动提交表单，因此绝对不需要调用.submit() 。

这些都是多余的和多余的。

Answer 2

您不需要处理提交事件。 如果表格无效，表格将不会提交 。 或者这样做：

 //$('#formASend').click(function () { formA.submit(function () { return formA.valid(); }); //}); 

外部点击事件处理程序。 你不需要这个： $('#formASend').click(function () {}); 我建议这样做：

 var formA = $('#formA'); formA.validate({...}); // no need for these lines: //$('#formASend').click(function () { // formA.submit(function () { // return formA.valid(); // }); //}); 

Answer 3

100％致力于validation多个表单：

我在一个页面中有5个表单。

Answer 4

我使用多种forms，不需要声明所有forms的字段。 只是使用class="required"来表示你需要的字段。

   
 id="formA">
 class="required" />
 Submit
 

 
 id="formB">
  class="required" />
 Submit
 

 
 id="formC">
  class="required" />
 Submit
  

和JavaScript

 $(document).ready(function () { $.validator.addClassRules('required', { required: true }); $('#formA').validate(); $('#formB').validate(); $('#formC').validate(); }); 

看： demo