Jquery.validate - 一个页面 - 多种形式，一个提交OK，别人不(Jquery.v

在我的网页，我有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();
    });
});

提交工作确定为第一种形式，并且不工作的其他两个。我检查的HTML指数与DOMLint，有没有问题。点击事件被触发，形式是有效的，提交返回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:

Quote OP:

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

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

debug:
Enables debug mode. If true, the form is not submitted and certain errors are displayed on the console (requires Firebug or Firebug lite).

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

Quote OP:

How to apply different rules to each form?

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
        }
    }
});

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

You do NOT need these:

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

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

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

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

The plugin only fires the submitHandler callback on a valid form, so there is no need to check validity.
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.

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();
});

请参见：演示

文章来源: Jquery.validate - one Page - multiple forms, one submits ok, others dont