Question

我有一个表单（类似于下面显示的），由jQuery validate plugin验证 -

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

（所以如果单击按钮然后验证并提交其他不运行验证并且只提交）是否有更简单的方法来实现此功能？

YES。

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

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

OR

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

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

我认为您可以动态在单个表单cancel按钮上添加/删除此submit类，具体取决于其他操作，功能或按钮。

<强>顺便说一句：

你的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();
    });
 });

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

JQuery表单验证

2 个答案: