且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

带有两个提交按钮的jQuery Validation插件?

更新时间:2022-12-11 13:44:31

您的代码...

$('#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 .