Jquery.validate - 一个页面 - 多个表单,一个提交ok,其他没有

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索引,没有问题.触发Click事件,表单有效,提交返回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事件,表单有效,提交返回true,但不提交.

该debug: true选项将阻止实际submit......这就是它的用途. 根据文件,

debug:
启用调试模式.如果为true,则表单未提交且控制台上显示某些错误(需要Firebug或Firebug lite).

debug删除该选项后,您的代码工作正常:http: //jsfiddle.net/9WrSH/1/

引用OP:

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

只需在每个表单的.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按钮并自动检查表单,因此无需外部处理事件.

您不需要有条件检查或submit()内部submitHandler:

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

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

• 该插件在有效时自动提交表单,因此绝对不需要调用.submit().

这些都是多余的和多余的.