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.