jQuery Validation with multi-part form

Question

This will probably turn into multiple questions as I work my way through it but I'm in need of some serious jQuery help. I've created a multi-part form based on the example at bassistance.de. In that demo, the validation is fairly simple - designating required fields with a class, iterating through and pulling error messages from the form element title attributes.

My form is more complex than the demo - and I'm in over my head with implementing the validation in this instance. For example, in the demo, the errors are coming right after the form element. In my case, 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.

Ideally, I'd like to be able to change the validation method in the demo as well and substitute one that I'm more familiar with - like:

$("#theForm").validate({
    errorPlacement: function(error, element) {
        if(element.attr("name") === "name") {
            error.appendTo("#nameError");
        }
    },
    groups: {
        capacityGroup: "progMin progMax",
    },
    rules: {
        fName: "required",
    },
    messages: {
        fName: "*First Name is required",
    }
});

So, I surely hope someone can help with this. I've uploaded a slightly different demo at www.43rdworld.com/multitest.htm with an added div for error messages and the stylesheet. I'd really like to change the way the form is validated so that it will still validate from page to page before being submitted but let me specify the required fields, write my own rules and messages and specify where those messages will display.

Answer 1

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.