JQuery Validate individual fieldsets

Question

Hi,

I've developed a form with multiple fieldsets to represent steps in filling out the complete form. The fieldsets are shown and hidden by button click (one on each fieldset) but I want to validate each fieldset before the next is shown.

I'm new to JQuery and I'm having a bit of trouble. I found this guide ( http://encosia.com/2009/11/24/asp-net-webforms-validation-groups-with-jquery-validation/) that allows me to validate different fieldsets independently but my problem is how do I use that validation to control the showing and hiding of the relevent fieldsets.

I thought the way to do this would be to create a function from each click event for the buttons but I can't seem to call the validate function correctly.

I'm afraid I'm completely confused now! Help!!

Answer 1

You can write a custom validation function for each fieldset and call it using the .keyup function. Here is an example:

HTML:
<div id="fieldset1">
<input type="text" name="fname" id="fname">
</div>

<div id="fieldset2">
//hidden using css
<input type="text" name="fname" id="fname">
</div>

Javascript:
$('#fieldset1 #fname').keyup(function () {
    // Runs every time your keystroke is released on this input
    if($(this).val() == 'Adam') {
        // Checks to see if the field's value is Adam. If it is, then it shows         the next fieldset. Otherwise it hides it.
        $('#fieldset2').show();
    } else {
        $('#fieldset2').hide();
    }
}

This is obviously meant as a very simple example, but it illustrates what you will need to do in order to validate your form and modify the DOM based on user input.