Jquery.validate - 一页 - 多个表单，一个提交正常，其他不提交

Question

在我的页面上，我有 3 个完整的表单，每个表单都有自己的提交按钮，每个表单和按钮都有不同的 id。

<form action="" method="post" class="form-horizontal" id="formA">
   ...
   <button id="formASend" type="submit" class="btn"> Submit</button>
</form>

<form action="" method="post" class="form-horizontal" id="formB">
   ...
   <button id="formBSend" type="submit" class="btn"> Submit</button>
</form>

<form action="" method="post" class="form-horizontal" id="formC">
   ...
   <button id="formCSend" type="submit" class="btn"> Submit</button>
</form>

在 javascript 中，我对每个提交按钮都有以下逻辑:

$.validator.setDefaults({
        debug:true,
        errorElement: 'span', //default input error message container
        errorClass: 'help-inline', // default input error message class
        focusInvalid: false, // do not focus the last invalid input)
        highlight: function (element) { // hightlight error inputs
            $(element).closest('.control-group').addClass('error'); // set error class to the control group
        },

        unhighlight: function (element) { // revert the change dony by hightlight
            $(element)
                .closest('.control-group').removeClass('error'); // set error class to the control group
        }

    });


$(function() {

    var formA = $('#formA');

    // init validator obj and set the rules
    formA.validate({
        rules: {
             ...
        }
    });

    formA.submit(function () {
        return formA.valid();
    });


    var formB = $('#formB');

    // init validator obj and set the rules
    formB.validate({
        rules: {
            ...
        }
    });

    formB.submit(function () {
        return formB.valid();
    });

    var formC = $('#formC');

    // init validator obj and set the rules
    formC.validate({
        rules: {
            ...
        }
    });

    formC.submit(function () {
        return formC.valid();
    });
});

对于第一个表单，提交工作正常，但对于其他两个表单则不起作用。我已经用 DOMLint 检查了 html 索引，没有问题。点击事件被触发，表单有效，submit返回true，但不提交。

验证工作正常，仅验证提交的表单。

如何对每个表单应用不同的规则？

可能的解决方案

$.validator.setDefaults({
            debug:true,
            errorElement: 'span', //default input error message container
            errorClass: 'help-inline', // default input error message class
            focusInvalid: false, // do not focus the last invalid input)
            highlight: function (element) { // hightlight error inputs
                $(element).closest('.control-group').addClass('error'); // set error class to the control group
            },

            unhighlight: function (element) { // revert the change dony by hightlight
                $(element)
                    .closest('.control-group').removeClass('error'); // set error class to the control group
            },
            submitHandler: function (form) {

               if ($(form).valid()) {
                   form.submit();
               }
            }
        });


    $(function() {

        var formA = $('#formA');

        // init validator obj and set the rules
        formA.validate({
            rules: {
                 ...
            }
        });

        var formB = $('#formB');

        // init validator obj and set the rules
        formB.validate({
            rules: {
                ...
            }
        });

        var formC = $('#formC');

        // init validator obj and set the rules
        formC.validate({
            rules: {
                ...
            }
        });
    });

添加提交处理程序，将提交事件返回到操作中。

Answer 1

引用OP:

Click event gets triggered, form is valid, submit returns true, but doesnt submit.

debug: true 选项将阻止实际的submit...这就是它的用途。 As per documentation ,

debug:
Enables debug mode. If true, the form is not submitted and certain errors are displayed on the console (requires Firebug or Firebug lite).

当删除 debug 选项时，您的代码可以正常工作:http://jsfiddle.net/9WrSH/1/

<小时/>

引用OP:

How to apply different rules to each form?

只需在每个表单的 .validate() 函数中声明不同的规则即可。

$('#myform1').validate({
    rules: {
        myfield1: {
            required: true,
            minlength: 3
        },
        myfield2: {
            required: true,
            email: true
        }
    }
});

参见:http://jsfiddle.net/9WrSH/1/

<小时/>

您不需要这些:

formA.submit(function () {
    return formA.valid();
});

插件已经捕获submit按钮并自动检查表单，因此不需要外部处理事件。

<小时/>

您不需要在 submitHandler 中进行条件检查或 submit():

submitHandler: function (form) {
//    if ($(form).valid()) {
//        form.submit();
//    }
}

• 该插件仅在有效表单上触发 submitHandler 回调，因此无需检查有效性。

• 该插件还会在表单有效时自动提交表单，因此完全不需要调用 .submit()。

这些都是多余的。