如何有条件地执行 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

（所以如果点击了按钮，然后验证并提交，否则不运行验证，只提交）有没有更简单的方法来实现这个功能？

是的。

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

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

或

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

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

我想您可以动态地根据其他一些操作、功能或按钮在单个表单 submit 按钮上添加/删除此 cancel 类。

---

---

顺便说一句：

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

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

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

不过，这更像是插件默认做的事情……

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

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

Answer 2

声明一个全局变量_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();
    });
 });