Jquery.validate - one Page - multiple forms, one submits ok, others dont

Question

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>

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

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?

Possible solution

$.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.

Answer 1

I work with multi forms, and don't need to declare all fields of form. just using to put class="required" for what fields you need.

<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>

and javascript

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

see: demo

Answer 2

100% working to Validate Multiple Forms:

<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>

I Have 5 Forms in a single Page.

Answer 3

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 4

You don't need to handle submit event. Form will not submit if it is not valid. Or do it like this:

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

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

Outside click eventhandler. You don't need this: $('#formASend').click(function () {}); I would suggest doing it like this:

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

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