Jquery.validate-一页-多种形式，一种提交可以，其他不 [英] Jquery.validate - one Page - multiple forms, one submits ok, others dont

问题描述

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

On my page, i have 3 complete forms, each has it's own submit button, with different id for each form and button.

<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中，每个提交按钮都有以下逻辑:

In javascript i have following logic for each submit button:

$.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，但不提交.

Submit work ok for first form, and doesnt work for the other two. I've checked the html index with DOMLint, and no problems there. Click event gets triggered, form is valid, submit returns true, but doesnt submit.

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

Validation work properly, validating only the form that was submitted.

如何对每种表单应用不同的规则?

How to apply different rules to each form?

可能的解决方案

$.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: {
                ...
            }
        });
    });

添加提交处理程序，将提交事件恢复为活动状态.

Adding submit handler, return submit event back into action.

推荐答案

引用OP:

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

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

debug: true选项将阻止实际的submit ...这就是它的作用. 根据文档，

The debug: true option will block the actual submit... that's what it's for. As per documentation,

调试:
启用调试模式. 如果为true，则该表单为未提交 ，并且控制台上会显示某些错误(要求 Firebug或Firebug Lite).

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/

Your code is working perfectly fine when the debug option is removed: http://jsfiddle.net/9WrSH/1/

引用OP:

如何对每种表单应用不同的规则?

How to apply different rules to each form?

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

Simply declare your different rules inside of each form's .validate() function.

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

请参阅: http://jsfiddle.net/9WrSH/1/

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

您不需要这些:

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

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

The plugin is already capturing the submit button and checking the form automatically, so there is no need for externally handling the events.

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

You do NOT need a conditional check or a submit() inside the submitHandler:

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

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

  • The plugin only fires the submitHandler callback on a valid form, so there is no need to check validity.

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

    The plugin also automatically submits the form when it's valid, so there's absolutely no need to call .submit().

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

    These are both redundant & superfluous.

    这篇关于Jquery.validate-一页-多种形式，一种提交可以，其他不的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！