CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-validate
Imran
Imran

Reputation: 1104

jQuery Validation - How to use for steps in a wizard like form?

I want to use jQuery Validation Plugin with jQuery UI Tabs. How I can validate using jQuery Validation Plugin on each step triggered by next button. I see examples of jQuery Validation Plugin and mostly are for validation of whole form at once. I need it step by step.

I am not a pro so please tell me some easy solution instead of suggesting me other plugins. My code looks like:

$("#frag1").click(function(){
     //I need jQuery Validation code here for a single step
     event.preventDefault();
}else {
$('.next-tab, .prev-tab').click(function() { 
         $tabs.tabs('select', $(this).attr("rel"));
         return false;
   });
}

Thanks in advance.

Upvotes: 1

Views: 4483

Answers (2)

Naga Harish M
Naga Harish M

Reputation: 2789

On next step button click check for which fragment div did not have "ui-tabs-hide" this css class. Then try to apply same CSS class (e.g:- "myinputs") for all inputs and checkbox and soon. Then apply validation for current "fragment" div inputs validation.

For example:- if I am in step 2. Then this div "fragment-2" won't have css class "ui-tabs-hide". You can see that class applied to other dives.

So, try to get current active div ID (here it is "fragment-2"). Then do like this

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

 $("#myform").validate().element( "#myselect" ); // here there are passing element ID

$("#myform").validate().element('#'+ CurrentFragment + '.myinputs'); //here we are passing current fragment css class inputs.

I am not sure it will accept css class. But try once else loop and handle false element and return false with out any step. So, user won't move to next fragment until he set values.

I not sure this is best idea. I don't have much knowledge about that validation plugin.

Upvotes: 0

Alex KeySmith
Alex KeySmith

Reputation: 17091

I realise that you didn't want suggestions for other plugins. But I think this could be especially useful for you:

There is the jQuery formwizard plugin, http://thecodemine.org/

Which integrates nicely with the jquery validation plugin. And also is themeable with jQuery-UI themes (if you are already using them on your site).

Upvotes: 2

Related Questions