jQuery Validation with multi-part form

Quote OP:

“This will probably turn into multiple questions as I work my way through it but I’m in need of some serious JQuery help.”

Your posting doesn’t really fit the StackOverflow format where only concise and specific questions are expected. Please see the StackOverflow question checklist and sscce.org for more posting guidance.

However, if you want to do a multi-step form with jQuery Validate, there are a few different approaches; here’s mine…

---

When I create multi-step forms, I use a unique set of <form> tags for each section. Then I use the .valid() method to test the section before moving to the next. (Don’t forget to first initialize the plugin; call .validate(), on all forms on DOM ready.)

Then on the last section, I use .serialize() on each form and concatenate them into a data query string to be submitted.

Something like this…

$(document).ready(function() {

    $('#form1').validate({ // initialize form 1
        // rules
    });

    $('#gotoStep2').on('click', function() { // go to step 2
        if ($('#form1').valid()) {
            // code to reveal step 2 and hide step 1
        }
    });

    $('#form2').validate({ // initialize form 2
        // rules
    });

    $('#gotoStep3').on('click', function() { // go to step 3
        if ($('#form2').valid()) {
            // code to reveal step 3 and hide step 2
        }
    });

    $('#form3').validate({ initialize form 3
        // rules,
        submitHandler: function (form) {
           // serialize and join data for all forms
           var data = $('#form1').serialize() + '&' + $('#form2').serialize() + '&' + $(form).serialize()
           // ajax submit
           return false; // block regular form submit action
        }
    });

    // there is no third click handler since the plugin takes care of this 
    // with the built-in submitHandler callback function on the last form.

});

Important to remember that my click handlers above are not using type="submit" buttons. These are regular buttons, either outside of the form tags or type="button".

Only the button on the very last form is a regular type="submit" button. That is because I am leveraging the plugin’s built-in submitHandler callback function on only the very last form.

“Proof of Concept” DEMO: http://jsfiddle.net/dNPFX/

Also, see for reference:

https://stackoverflow.com/a/19546698/594235

---

Quote OP:

“I want to designate the fields I want validate, create the rules and specify where I want to put errors with a class depending on whether they are errors or not. I’m using the Blueprint CSS framework and it already has classes built for such things but, as I said, I can’t figure out how to make that work.”

Again, that’s not very specific. Are you talking about using class to set the rules or using a custom class for error designation? What have you tried? The jQuery Validate plugin will allow you specify rules in many different ways including by class.

If you refer to the documentation, you can see that there are options called validClass and errorClass that will allow you to specify different class names used for fields when they are valid or not.