我有一个包含大约50个字段和两个提交按钮的表单，“SAVE”和“SAVE＆amp; SUBMIT”。 如果用户单击“保存”，则仅验证某些值，例如。 field1，field2。当用户点击“保存和提交”按钮时，它应验证所有50个字段并提交。
<form id="myform">
<input type="text" name="field1" />
<br/>
<input type="text" name="field2" />
<br/>
<input type="text" name="field3" />
<br/>
<input type="text" name="field4" />
<br/>
<input type="submit" id="button1" value="Save" />
<input type="submit" id="button2" value="Submit" />
</form>
$(document).ready(function () {
$('#button1').click(function(){
$("#myform").validate({
rules: {
field1: {
required: true
},
field2: {
required: true
}
},
submitHandler: function (form) { // for demo
alert("data saved");
}
});
});
$('#button2').click(function(){
$("#myform").validate({
rules: {
field1: {
required: true
},
field2: {
required: true
},
field3: {
required: true
},
field4: {
required: true
}
},
submitHandler: function (form) { // for demo
alert("data submited");
}
});
});
});
我为此创建了jsfiddle：example test
答案 0 :(得分：25)
您的代码......
$('#button1').click(function(){
$("#myform").validate({
....
});
});
$('#button2').click(function(){
$("#myform").validate({
....
});
});
你绝对不能这样做：
1）您无法在同一.validate()上多次调用form方法。任何后续调用都会被忽略。
2）您不应将.validate()方法放在click处理程序中。 .validate()方法是插件的初始化方法，只在DOM ready事件处理程序中被称为一次。正确初始化后，插件会自动捕获提交按钮。
HTML标记和点击处理程序：
此插件还会自动捕获所有input type="submit"和button type="submit"元素的点击，并启动验证/提交。
因此，如果您需要控制两个不同按钮的操作，则首先需要将按钮更改为input type="button"或button type="button"元素。
然后，您可以使用click()处理程序根据单击按钮的.rules()方法动态更改规则。请参阅the .rules() methods文档。
使用.submit()以编程方式提交。换句话说，这将触发验证测试并尝试提交IF有效的表单......就像您有一个submit按钮一样。
使用.valid()以编程方式测试表单。换句话说，这将触发验证测试，但不会提交IF有效的表格。
示例：
$(document).ready(function () {
$('#myform').validate({ // initialize the plugin on your form
// options, rules and/or callbacks
});
// IMPORTANT: buttons are NOT type="submit"
$('#button1').on('click', function(){ // capture the click
$('#myfield').rules('add', { // dynamically declare the rules
required: true,
email: true
});
$('#myOtherField').rules('remove'); // remove the other rules.
// another '.rules()' call, etc.
$('#myform').valid(); // trigger the validation & do NOT submit
});
$('#button2').on('click', function(){ // capture the click
$('#myOtherField').rules('add', { // dynamically declare the rules
required: true,
digits: true
});
$('#myfield').rules('remove'); // remove the other rules.
// another '.rules()' call, etc.
$('#myform').submit(); // trigger the validation & submit
});
});
工作演示：http://jsfiddle.net/Kt93M/
演示只是your original jsFiddle，应用了这些原则。
答案 1 :(得分：0)
如果您将使用相同的验证，也许您应该使用以下代码：
插入一个隐藏的动作，例如单击按钮后验证要使用的方法
<input type="hidden" id="action" name="action">
然后在您的提交处理程序中：
submitHandler: function (form, event) {
var action = $("#formPagoContratista #action").val();
if (action === "action_1") {
firstFunction();
}else if (action === "action_2") {
secondFunction();
}
}
答案 2 :(得分：0)
如果您具有以下两个按钮：
<div class="form-group text-right my-5 ">
<input type="submit" name="save" class="btn btn-bg col-sm-2 form-control" value="Save">
您可以根据两个按钮进行验证和提交： 使用ajax保存发送并且不重新加载。 “下一步”按钮将保存并重定向到下一页。
$('form').validate({
submitHandler: function(form, e) {
var button = $(":focus", this);
var name = button.context.submitButton.defaultValue;
console.log(name);
if(name == "Save"){
$(form).ajaxSubmit();
}else{
form.submit();
}
}
});