2

在我的页面上，我有 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: {
                ...
            }
        });
    });

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

4

4 回答 4

5

引用操作：

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

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

debug：
启用调试模式。如果为 true，则不会提交表单，并且某些错误会显示在控制台上（需要 Firebug 或 Firebug lite）。

debug删除选项后 ，您的代码运行良好：http: //jsfiddle.net/9WrSH/1/

引用操作：

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

只需在每个表单的.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().

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

于 2013-04-04T15:09:14.867 回答
0

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

//$('#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();
//    });
//});
于 2013-04-04T09:57:39.537 回答
0

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 个表单。

于 2016-02-15T05:53:09.810 回答
-1

我使用多种表单，不需要声明所有表单字段。只是用来放置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();
});

见：演示

于 2013-12-20T08:39:23.910 回答