how to validate form in steps by step procedure

Question

I have query how to validate form in steps by step, I create a form and it has a three sections in same page,

1. Personal Info,
2. Contact info,
3. Conformation details.

My question is:

If these specific inputs of step1 are all valid and return “true” in #Form, the step-two button will (be activated/take you to the next step) and similarly wth step 2 if all specific input are all valid and return true the step3 will activate

how to validate form in steps when i am using jquery validation

my code is here:

$(document).ready(function() {
var navHTML = '' + ''; $(function(){

        // init 
        $('#Form > div') 
            .hide() 
            .append(navHTML); 
        $('#first-step .prev-als').remove(); 
        $('#last-step .form-next').remove(); 

        // show first step 
        $('#first-step').show(); 
$("a.form-next").click(function() {

    var whichStep = $(this).parent().parent().attr('id'); 



            if( whichStep == 'first-step' ) 
            { 


      $("#first-step").validate(); 
                if($("#form").valid()==false)  return false;     
//Dont navigate to second page 

            } 
            else if( whichStep == 'second-step' ) 

            {                    

            } 

            else if( whichStep == 'last-step' ) 
            { 
                // validate last-step 
            } 
$(this).parent().parent().hide().next().show(); });

$('a.prev-als ').click(function(){ 
            $(this).parent().parent().hide().prev().show(); 
        }); 


    }); 

                       }); 

Answer 1

The only way I think you could do this with the Validation plugin would be to use the element method and that seems like it would take forever. What about making each section a different form? Then you could easily validate them one by one.