How Can I Implement A Tabbed Form Submission in Jquery

Question

The problem I run to is the validation of fields

1. if a field is invalid in tab 1, do not go to any other tabs after it

2. if all fields are good, go to the next tab

3. repeat process

4. the final tab submits the form

the problem is, I have a single form and I divided it into tabs. If I use the jquery validation plugin, it validates the whole form including fields not at tab 1, which invalidates the whole form thus making me stuck at tab 1 despite all fields there being valid.

Any ideas on this one?

Answer 1

you can group controls according to tabs by providing dummy css class attribute like:

<input type="text" id="txtName" class="required tab1"/>

now on triggering the tab change, use a function to validate the fields belonging to the field:

$("#ID OF YOUR FORM").validate().element( ".tab1" );//using jquery.validation

PS:- I don't know what you are using for tabbing. You need to wireup callback function to trigger validation when user clicks on a tab to stop from going to next tab if current one has invalid controls.

Answer 2

Any ideas on this one?

Yeah, make 3 different tabs with 1 form in each tab.