【发布时间】：2026-02-22 23:30:01
【问题描述】：
在我的页面上，我有 3 个完整的表单，每个表单都有自己的提交按钮，每个表单和按钮都有不同的 id。
<form action="" method="post" class="form-horizontal" id="formA">
...
<button id="formASend" type="submit" class="btn"> Submit</button>
</form>
<form action="" method="post" class="form-horizontal" id="formB">
...
<button id="formBSend" type="submit" class="btn"> Submit</button>
</form>
<form action="" method="post" class="form-horizontal" id="formC">
...
<button id="formCSend" type="submit" class="btn"> Submit</button>
</form>
在 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索引，没有问题。点击事件被触发，表单有效，提交返回true，但不提交。
验证工作正常，仅验证提交的表单。
如何对每个表单应用不同的规则？
可能的解决方案
$.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: {
...
}
});
});
添加提交处理程序，返回提交事件。
【问题讨论】：
-
您有 3 个
.click()s？还是上面那个^？ -
你也可以分享其他处理程序的代码吗？
-
@dunli 3
.click()s，是的。删除它们也没有帮助。删除提交处理程序也没有帮助。 -
引用 OP： “点击事件被触发，表单有效，提交返回 true，但不提交。” ~ 你刚才描述了正是
debug:true选项supposed 要做的事情。去掉它。另请参阅我对其他指针的回答。
标签： jquery forms jquery-validate