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：

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

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

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()。

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

Answer 2

您无需处理提交事件。如果表格无效，表格将不会提交。或者这样做：

//$('#formASend').click(function () {
    formA.submit(function () {

        return formA.valid();
    });
//});

外部点击事件处理程序。你不需要这个：$('#formASend').click(function () {}); 我建议这样做：

var formA = $('#formA');
formA.validate({...});
// no need for these lines:
//$('#formASend').click(function () {
//    formA.submit(function () {

//        return formA.valid();
//    });
//});

Answer 3

100％正在验证多个表单：

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>

<script type="text/javascript">
  $(document).ready(function () {
    $("form").submit(function () {

      var clikedForm = $(this); // Select Form

      if (clikedForm.find("[name='mobile_no']").val() == '') {
        alert('Enter Valid mobile number');
        return false;
      }
      if (clikedForm.find("[name='email_id']").val() == '') {
        alert('Enter valid email id');
        return false;
      }

    });
  });
</script>

我在一个页面中有5个表单。

Answer 4

我使用多个表单，不需要声明表单的所有字段。只是用class="required"来表示你需要的字段。

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>

    <form action="" method="post" class="form-horizontal"<span style="color: blue;"> id="formA"</span>><br />
    <input type="text" name="name1" <span style="color: red;">class="required"</span> /><br />
    <button id="formASend" type="submit" class="btn">Submit</button><br />
    </form><br />
    <form action="" method="post" class="form-horizontal"<span style="color: blue;"> id="formB"</span>><br />
    <input type="text" name="name2"<span style="color: red;"> class="required"</span> /><br />
    <button id="formBSend" type="submit" class="btn">Submit</button><br />
    </form><br />
    <form action="" method="post" class="form-horizontal"<span style="color: blue;"> id="formC"</span>><br />
    <input type="text" name="name3"<span style="color: red;"> class="required"</span> /><br />
    <button id="formCSend" type="submit" class="btn">Submit</button><br />
</form>

和javascript

$(document).ready(function () {
            $.validator.addClassRules('required', {
                required: true
            });
            $('#formA').validate();
            $('#formB').validate();
            $('#formC').validate();
});

请参阅：demo

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

4 个答案: