带有两个提交按钮的jQuery Validation插件? [英] jQuery Validation plugin with two submit buttons?

问题描述

我有一个表单，包含大约50个字段和两个提交按钮，分别为保存"和保存并提交". 如果用户单击保存"，则仅验证某些值，例如. field1，field2.当用户单击保存并提交"按钮时，它应验证所有50个字段并提交.

I have one form with around 50 fields and two submit buttons, "SAVE" and "SAVE & SUBMIT". If the user clicks "SAVE", then validate only some values, eg. field1, field2. When user clicks "SAVE & SUBMIT" button, it should validate all 50 fields and submit.

<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:示例测试

I have created jsfiddle for this: example test

推荐答案

您的代码...

$('#button1').click(function(){             
    $("#myform").validate({
        ....
    });             
}); 

$('#button2').click(function(){
    $("#myform").validate({
        ....
    });
});

您绝对不能这样做:

1)您不能在同一form上多次调用.validate()方法.任何后续呼叫都将被忽略.

1) You cannot call the .validate() method more than once on the same form. Any subsequent calls are always ignored.

2)您不应将.validate()方法放在click处理程序中. .validate()方法是插件的 initialization 方法，仅在DOM ready事件处理程序中被称为一次.正确的初始化后，插件会自动捕获提交"按钮的点击.

2) You should not put the .validate() method inside of a click handler. The .validate() method is the initialization method of the plugin and only gets called once within a DOM ready event handler. After proper initialization, the submit button click is captured automatically by the plugin.

HTML标记和点击处理程序:

此插件还可以自动捕获任何input type="submit"和button type="submit"元素的点击并启动验证/提交.

This plugin also automatically captures the click of any input type="submit" and button type="submit" elements and initiates validation/submission.

因此，如果您需要控制两个不同按钮的操作，则首先需要将按钮更改为input type="button"或button type="button"元素.

So if you need to control what happens for two different buttons, then you first need to change your buttons into input type="button" or button type="button" elements.

然后，您可以使用click()处理程序通过.rules()方法根据单击哪个按钮来动态更改规则.请参见 .rules()方法文档.

Then you can use click() handlers to dynamically change the rules with the .rules() methods as per which button was clicked. See the .rules() methods documentation.

使用.submit()以编程方式提交.换句话说，这将触发验证测试，并尝试提交是否为有效的表单……就像您有一个submit按钮一样.

Use .submit() to programmatically submit. In other words, this will trigger a validation test and attempt to submit the form IF valid... same as if you had a submit button.

使用 .valid() 以编程方式测试表单.换句话说，这将触发验证测试，但不会提交有效的表格.

Use .valid() to programmatically test the form. In other words, this will trigger a validation test but will NOT submit the form IF valid.

示例:

$(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/

Working DEMO: http://jsfiddle.net/Kt93M/

该演示只是使用了这些原理的原始jsFiddle .

这篇关于带有两个提交按钮的jQuery Validation插件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！