如何有条件地执行 jQuery 验证插件

Question

我有一个表单（类似于下面显示的）正在由 jQuery 验证插件验证 -

JQuery 表单验证

$("#form").validate({
    debug: true,
    rules: {
        Field1: {
            required: true,
            field1condition: true
        },
        Field2: {
            required: true,
            field2condition: true
        }
    }
    ,
    submitHandler: function (form) {
        submit(form)
    }
});

我需要验证整个表单，只有在之前单击了某个按钮（比方说 id="clickme"）的情况下。但是在任何情况下，都应该提交表单（因此，如果单击了按钮，则验证并提交，否则不要运行验证并仅提交）。我可以为每个字段使用 depends: 但这似乎是一项繁琐的任务，因为我对每个字段都有很多条件。有没有更简单的方法来实现这个功能？

提前致谢。

Answer 1

声明一个全局变量_validate

   $(document).ready(function(){

    var _validate = false;

    //You need to initialize validate before.
    $("#form").validate({
        debug: true,
        rules: {
            Field1: {
                required: true,
                field1condition: true
            },
            Field2: {
                required: true,
                field2condition: true
            }
        }
        ,
        submitHandler: function (form) {
            submit(form)
        }
    });

    $("#clickme").click(function(){
        _validate = true;
    });


    $("#submit_button_click_id").click(function(e){
    e.preventDefault();
    if(_validate) $("#form").validate();
    else $("#form").submit();
    });
 });

Answer 2

(so if the button was clicked then validate and submit else don't run validate and only submit) Is there any simpler way to achieve this functionality?

是的。

在 submit 按钮上使用 class="cancel"。

<input type="submit" class="cancel" ....

或

<button type="submit" class="cancel" ....

使用 class="cancel"，此按钮将根据插件的 submitHandler 提交表单并完全绕过表单验证。如果没有 class="cancel"，此按钮将触发验证并仅在表单完全验证后才提交。

我想你可以 动态地 add/remove 这个 cancel class 在一个单一的表单 submit 按钮上操作、功能或按钮。

顺便说一句：

你的submitHandler可能是多余的...

submitHandler: function (form) {
    submit(form)
}

我只说 "probably" 是因为我不确定您是否有另一个名为 submit() 的函数，或者您是否只是不正确地使用了 jQuery .submit()。

然而，这更像是插件在默认情况下所做的...

submitHandler: function (form) {
    $(form).submit(); // <- default form action
}

如果是这样，那么您甚至不需要 submitHandler 选项，因为这已经是插件的默认行为。只需删除 submitHandler.

如何有条件地执行 jQuery 验证插件

How to conditionally execute jQuery validate plugin

jquery

jquery-validate

JQuery 表单验证