Help with jQuery Validation plugin and a form that uses 'panels'

Question

I have a form that works in 'sections' that I will refer to as 'panels'.

By default, the form is listed out on the page, one panel after the other. However, with JavaScript, it puts the panels into one panel viewer, and displays them one after the other (with prev/next buttons).

Example Form Workflow

Panel 1: User Details -> Panel 2: User Location -> Panel 3: User Info -> Panel 4: Confirm Details

I am using the jQuery Validation plugin.

My problem is, I have set up all the rules for all the inputs in the first 3 panels, and I'd like to be able to only validate a subset of them per panel. Example, when pushing 'next panel' after completing name & email (in the 1st, user details panel), I'd like to do a validation only on that panel first, and then get a boolean response (if the 1st panel validated), and if true, then proceed to the next panel.

I've played around with a bit of the config, but unfortunately could not get it to work as I wanted. This is my first project with this plugin so I'm quite new to it!

Is there a way to add rules dynamically to the plugin? i.e. not on $('form').validate(options) ?

What I'd like to do, is call the validate() on the form, with all the error messages, and then on the 'next panel' code, do a switch case to determine which rules to add, and then call a validate() myself.

Answer 1

Could you not do: next.onclick(validate form) hide errors for following panels display next panel

Looking at the documentation, it seems that you can validate each element, so onclick( validate page one) ... and so on

http://docs.jquery.com/Plugins/Validation/Validator/element#element

Or you could add methods to the validation using this:

http://docs.jquery.com/Plugins/Validation/Validator/addMethod#namemethodmessage

Answer 2

Are you doing something like this multi-part form validation?

Wow, didn't even notice how old this post is, I guess you figured it out/found a workaround by now =).