views:

283

answers:

1

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();  
        });  


    });  

});  
A: 

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/

Robert Harvey
Thanks Robert,i already done this same procedeur but i need to add validations on every steps(basically on div tag) so please guide me best way to do this.
shahid
Well, I personally wouldn't do this in the browser. You're going to need to validate the input on the server anyway, so I would serve up the first page, validate and save it (to a database, presumably), and then serve up a new page for the next step.
Robert Harvey
If you still want to validate in the browser, you can use the jQuery Validation Plugin to do this: http://bassistance.de/jquery-plugins/jquery-plugin-validation/
Robert Harvey