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

在我的页面上，我有 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 索引，没有问题。点击事件被触发，表单有效，提交返回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: {
                ...
            }
        });
    });

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

引用OP：

点击事件被触发，表单有效，提交返回true，但 不提交.

The debug: true选项将阻止实际的submit……这就是它的用途。根据文档 http://docs.jquery.com/Plugins/Validation/validate#toptions,

debug:
启用调试模式。如果为真，则形式为没有提交并且某些错误会显示在控制台上（需要 Firebug 或 Firebug lite）。

当你的代码工作得很好时debug选项被删除：http://jsfiddle.net/9WrSH/1/ http://jsfiddle.net/9WrSH/1/

引用OP：

如何对每种形式应用不同的规则？

只需在每个表单中声明您的不同规则.validate()功能。

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

See: http://jsfiddle.net/9WrSH/1/ http://jsfiddle.net/9WrSH/1/

你不需要这些：

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

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

您不需要条件检查或submit()在 - 的里面submitHandler:

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

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

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

这些都是多余的。