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

forms, jquery, jquery-validate

Solution

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.

Problem

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.

Original source