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.

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.

Comments

[Neara]

I moved all submit funcs outside of click event, as you suggested, and it doenst work. First one still gets submitted, and others dont.

[Neara]

and removing all submit handlers, has same effect. Unfortunately, i dont have jsfiddle account and not sure how to use it. Will take me a few secs to figure it out, lol

[karaxuna]

It does not need to create account. just write code, include jQuery and click save and write here url. I'm not in hurry :))

[Neara]

im sorry, karaxuna, i dont have the time atm to try and fit my real code into fiddle and make it work/show the behaviour i get. It is a long template. The pseudo code i posted here is a good representation of the idea of what i have. Something prevents the submit event from happening, my IDE doesnt show any syntax errors, the page has no DOMLint errors. I am grateful for any ideas, aside from fiddling with js fiddle atm. Again, my apologies.

[karaxuna]

@Neara I have written fiddle, it works, take a look at it: jsfiddle.net/MLUwf

[Neara]

I think what causes troubles is multiple validators. jsfiddle.net/neara/MLUwf/1

[Neara]

i wish it was a syntax mistake! in real code, i dont have syntax mistakes, the ide makes sure of that. But the bug is somewhere in my js file, b.c removing it makes the submit buttons work properly. i added more of my js code.

[karaxuna]

@Neara look in browser's console window, there are written errors that you may have in code

[Neara]

thank you very much for such full and well explained answer :)