jQuery validation per multiple fieldsets, how to use different event to trigger validation per section

Question

Hi All!

I have a really, really long form (about 300 fields) that I broke down into different sections using this slick jQuery plugin Form Wizard. If you group your form into different fieldsets, the FormWizard will automagically display one section at a time, with a Next hyperlink to take you to the next section:
<a id="step0Next" class="next" href="#">Next ></a>

My question is this: Using the jQuery Validation plugin, how can I validate each fieldset when a user clicks Next, and so forth, instead of using the Submit button. Put differently, how can I change the trigger event from Submit to six different hyperlinks for six separate sections?

Thanks for helping this newb out.

Answer 1

If I have understood you correctly, why not do this:

Use the jQuery validation plug-in to see if the user input is correct then if it is make the link to go to the next part of the form visible.

For example, create a span tag like so:

<span class="formLink"></span>

Then when the jQuery validation plug-in checks that the user input is OK do something like this:

$(".formLink").html('<a id="step0Next" class="next" href="#">Next</a>');

If the validation plug-in detects there is an error in the user input then you can output the error in the same tag like so:

$(".formLink").text("ERROR: You have not supplied the correct information.");

Answer 2

I don't think this is a trivial solution, but I have done something similar in my current project.

1) Bind an event to each next link. In the event, you are going to validate each input in the fieldset manually using the element method of the jquery validation plugin.

2) In the event, get the current fieldset. Your plugin can probably keep track of this for you, but I'm not familiar with it.

3) Search the fieldset for all of its inputs and validate them individually.

4) If any of the inputs in the fieldset are invalid, don't advance to the next page.

The following piece of code manually validates the non hidden inputs in a fieldset whenever the next link is clicked. It does not show how to retrieve the fieldset and validator or how to stop the progression to the next fieldset if the form is invalid. Your form plugin may be able to help with this. What you should get out of this example is that you can manually validate all the inputs in a fieldset using the jquery validation plugin.

$('.next').bind('click', function() {
 var inputs = myFieldset.find(':input:not(:hidden)');
 for (var i = 0; i < inputs.length; i++) {
   myValidator.element($(inputs[i]));
 }
});