Jquery.validate - 一页 - 多个表单，一个提交正常，其他不提交
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15807948/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery.validate - one Page - multiple forms, one submits ok, others dont
提问by Neara
On my page, i have 3 complete forms, each has it's own submit button, with different id for each form and button.
在我的页面上，我有 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>
In javascript i have following logic for each submit button:
在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();
});
});
Submit work ok for first form, and doesnt work for the other two. I've checked the html index with DOMLint, and no problems there. Click event gets triggered, form is valid, submit returns true, but doesnt submit.
提交第一个表单的工作正常，但不适用于其他两个表单。我已经用 DOMLint 检查了 html 索引，那里没有问题。点击事件被触发，表单有效，提交返回true，但不提交。
Validation work properly, validating only the form that was submitted.
验证工作正常，仅验证提交的表单。
How to apply different rules to each form?
如何对每种形式应用不同的规则？
Possible solution
可能的解决方案
$.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: {
...
}
});
});
Adding submit handler, return submit event back into action.
添加提交处理程序，将提交事件返回到操作中。
回答by Sparky
Quote OP:
引用 OP：
Click event gets triggered, form is valid, submit returns true, but doesnt submit.
单击事件被触发，表单有效，提交返回 true，但不提交。
The debug: trueoption will block the actual submit... that's what it's for. As per documentation,
该debug: true选项将阻止实际submit......这就是它的用途。 根据文档，
debug:
Enables debug mode. If true, the form is not submittedand certain errors are displayed on the console (requires Firebug or Firebug lite).
debug：
启用调试模式。如果为 true，则不会提交表单并在控制台上显示某些错误（需要 Firebug 或 Firebug lite）。
Your code is working perfectly fine when the debugoption is removed: http://jsfiddle.net/9WrSH/1/
debug删除该选项后，您的代码运行良好：http: //jsfiddle.net/9WrSH/1/
Quote OP:
引用 OP：
How to apply different rules to each form?
如何对每种形式应用不同的规则？
Simply declare your different rules inside of each form's .validate()function.
只需在每个表单的.validate()函数中声明不同的规则。
$('#myform1').validate({
rules: {
myfield1: {
required: true,
minlength: 3
},
myfield2: {
required: true,
email: true
}
}
});
See: http://jsfiddle.net/9WrSH/1/
见：http: //jsfiddle.net/9WrSH/1/
You do NOT need these:
你不需要这些：
formA.submit(function () {
return formA.valid();
});
The plugin is already capturing the submitbutton and checking the form automatically, so there is no need for externally handling the events.
该插件已经在捕获submit按钮并自动检查表单，因此无需从外部处理事件。
You do NOT need a conditional check or a submit()inside the submitHandler:
您不需要条件检查或submit()内部submitHandler：
submitHandler: function (form) {
// if ($(form).valid()) {
// form.submit();
// }
}
The plugin only fires the
submitHandlercallback on a valid form, so there is no need to check validity.The plugin also automatically submits the form when it's valid, so there's absolutely no need to call
.submit().
该插件仅
submitHandler在有效表单上触发回调，因此无需检查有效性。该插件还会在表单有效时自动提交表单，因此绝对不需要调用
.submit().
These are both redundant & superfluous.
这些都是多余的和多余的。
回答by karaxuna
You don't need to handle submit event. Form will not submit if it is not valid. Or do it like this:
您不需要处理提交事件。如果表单无效，则不会提交。或者这样做：
//$('#formASend').click(function () {
formA.submit(function () {
return formA.valid();
});
//});
Outside click eventhandler. You don't need this: $('#formASend').click(function () {});I would suggest doing it like this:
外部单击事件处理程序。你不需要这个：$('#formASend').click(function () {});我建议这样做：
var formA = $('#formA');
formA.validate({...});
// no need for these lines:
//$('#formASend').click(function () {
// formA.submit(function () {
// return formA.valid();
// });
//});
回答by Irshad Khan
100% working to Validate Multiple Forms:
100% 致力于验证多个表单：
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("form").submit(function () {
var clikedForm = $(this); // Select Form
if (clikedForm.find("[name='mobile_no']").val() == '') {
alert('Enter Valid mobile number');
return false;
}
if (clikedForm.find("[name='email_id']").val() == '') {
alert('Enter valid email id');
return false;
}
});
});
</script>
I Have 5 Forms in a single Page.
我在一个页面中有 5 个表单。
回答by Samrong Prey Kabbas
I work with multi forms, and don't need to declare all fields of form. just using to put class="required"for what fields you need.
我使用多个表单，不需要声明表单的所有字段。只是用于放置class="required"您需要的字段。
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<form action="" method="post" class="form-horizontal"<span style="color: blue;"> id="formA"</span>><br />
<input type="text" name="name1" <span style="color: red;">class="required"</span> /><br />
<button id="formASend" type="submit" class="btn">Submit</button><br />
</form><br />
<form action="" method="post" class="form-horizontal"<span style="color: blue;"> id="formB"</span>><br />
<input type="text" name="name2"<span style="color: red;"> class="required"</span> /><br />
<button id="formBSend" type="submit" class="btn">Submit</button><br />
</form><br />
<form action="" method="post" class="form-horizontal"<span style="color: blue;"> id="formC"</span>><br />
<input type="text" name="name3"<span style="color: red;"> class="required"</span> /><br />
<button id="formCSend" type="submit" class="btn">Submit</button><br />
</form>
and javascript
和 javascript
$(document).ready(function () {
$.validator.addClassRules('required', {
required: true
});
$('#formA').validate();
$('#formB').validate();
$('#formC').validate();
});
see: demo
见：演示
