jQuery Validation插件有两个提交按钮？

Question

我有一个表格,有大约50个字段和两个提交按钮,"SAVE"和"SAVE&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

Answer 1

你的代码......

$('#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()单击按钮的方法动态更改规则.请参阅该.rules()方法的文档.

用于.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/

该演示只是您应用这些原则的原始jsFiddle.