Question

I have query how to validate multiple step form, i create a form and it has a three sections in a 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

If you want to do this in the browser, consider using the jQuery Wizard Plugin located here: http://worcesterwideweb.com/2007/06/04/jquery-wizard-plugin/

A demo of the plugin in action can be found here: http://worcesterwideweb.com/jquery/wizard/