<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"><head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Smart Wizard 2 - Step Validation Example - a javascript jQuery wizard control plugin</title>

<link href="styles/demo_style.css" rel="stylesheet" type="text/css">



<link href="styles/smart_wizard.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="js/jquery.smartWizard-2.0.min.js"></script>



<script type="text/javascript">

   

    $(document).ready(function(){

    	// Smart Wizard     	

  		$('#wizard').smartWizard({transitionEffect:'slideleft',onLeaveStep:leaveAStepCallback,onFinish:onFinishCallback,enableFinishButton:true});



      function leaveAStepCallback(obj){

        var step_num= obj.attr('rel');

        return validateSteps(step_num);

      }

      

      function onFinishCallback(){

       if(validateAllSteps()){

        $('form').submit();

       }

      }

            

		});

	   

    function validateAllSteps(){

       var isStepValid = true;

       

       if(validateStep1() == false){

         isStepValid = false;

         $('#wizard').smartWizard('setError',{stepnum:1,iserror:true});         

       }else{

         $('#wizard').smartWizard('setError',{stepnum:1,iserror:false});

       }

       

       if(validateStep3() == false){

         isStepValid = false;

         $('#wizard').smartWizard('setError',{stepnum:3,iserror:true});         

       }else{

         $('#wizard').smartWizard('setError',{stepnum:3,iserror:false});

       }

       

       if(!isStepValid){

          $('#wizard').smartWizard('showMessage','Please correct the errors in the steps and continue');

       }

              

       return isStepValid;

    } 	

		

		

		function validateSteps(step){

		  var isStepValid = true;

      // validate step 1

      if(step == 1){

        if(validateStep1() == false ){

          isStepValid = false; 

          $('#wizard').smartWizard('showMessage','Please correct the errors in step'+step+ ' and click next.');

          $('#wizard').smartWizard('setError',{stepnum:step,iserror:true});         

        }else{

          $('#wizard').smartWizard('setError',{stepnum:step,iserror:false});

        }

      }

      

      // validate step3

      if(step == 3){

        if(validateStep3() == false ){

          isStepValid = false; 

          $('#wizard').smartWizard('showMessage','Please correct the errors in step'+step+ ' and click next.');

          $('#wizard').smartWizard('setError',{stepnum:step,iserror:true});         

        }else{

          $('#wizard').smartWizard('setError',{stepnum:step,iserror:false});

        }

      }

      

      return isStepValid;

    }

		

		function validateStep1(){

       var isValid = true; 

       // Validate Username

       var un = $('#username').val();

       if(!un && un.length <= 0){

         isValid = false;

         $('#msg_username').html('Please fill username').show();

       }else{

         $('#msg_username').html('').hide();

       }

       

       // validate password

       var pw = $('#password').val();

       if(!pw && pw.length <= 0){

         isValid = false;

         $('#msg_password').html('Please fill password').show();         

       }else{

         $('#msg_password').html('').hide();

       }

       

       // validate confirm password

       var cpw = $('#cpassword').val();

       if(!cpw && cpw.length <= 0){

         isValid = false;

         $('#msg_cpassword').html('Please fill confirm password').show();         

       }else{

         $('#msg_cpassword').html('').hide();

       }  

       

       // validate password match

       if(pw && pw.length > 0 && cpw && cpw.length > 0){

         if(pw != cpw){

           isValid = false;

           $('#msg_cpassword').html('Password mismatch').show();            

         }else{

           $('#msg_cpassword').html('').hide();

         }

       }

       return isValid;

    }

    

    function validateStep3(){

      var isValid = true;    

      //validate email  email

      var email = $('#email').val();

       if(email && email.length > 0){

         if(!isValidEmailAddress(email)){

           isValid = false;

           $('#msg_email').html('Email is invalid').show();           

         }else{

          $('#msg_email').html('').hide();

         }

       }else{

         isValid = false;

         $('#msg_email').html('Please enter email').show();

       }       

      return isValid;

    }

    

    // Email Validation

    function isValidEmailAddress(emailAddress) {

      var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);

      return pattern.test(emailAddress);

    } 

		

		

</script>

</head><body>



<div class="demoHead">   

  <h2>Step Validation Example</h2>

</div>



<table align="center" border="0" cellpadding="0" cellspacing="0">

<tr><td>

<?

   if(isset($_REQUEST['issubmit'])){

      echo "<strong>form is sumbitted</strong>";

   }



?>

 

<form action="#" method="POST">

  <input type='hidden' name="issubmit" value="1">

<!-- Tabs -->

  		<div id="wizard" class="swMain">

  			<ul>

  				<li><a href="#step-1">

                <label class="stepNumber">1</label>

                <span class="stepDesc">

                   Account Details<br />

                   <small>Fill your account details</small>

                </span>

            </a></li>

  				<li><a href="#step-2">

                <label class="stepNumber">2</label>

                <span class="stepDesc">

                   Profile Details<br />

                   <small>Fill your profile details</small>

                </span>

            </a></li>

  				<li><a href="#step-3">

                <label class="stepNumber">3</label>

                <span class="stepDesc">

                   Contact Details<br />

                   <small>Fill your contact details</small>

                </span>

             </a></li>

  				<li><a href="#step-4">

                <label class="stepNumber">3</label>

                <span class="stepDesc">

                   Other Details<br />

                   <small>Fill your other details</small>

                </span>

            </a></li>

  			</ul>

  			<div id="step-1">	

            <h2 class="StepTitle">Step 1: Account Details</h2>

            <table cellspacing="3" cellpadding="3" align="center">

          			<tr>

                    	<td align="center" colspan="3">&nbsp;</td>

          			</tr>        

          			<tr>

                    	<td align="right">Username :</td>

                    	<td align="left">

                    	  <input type="text" id="username" name="username" value="" class="txtBox">

                      </td>

                    	<td align="left"><span id="msg_username"></span>&nbsp;</td>

          			</tr>

          			<tr>

                    	<td align="right">Password :</td>

                    	<td align="left">

                    	  <input type="password" id="password" name="password" value="" class="txtBox">

                      </td>

                    	<td align="left"><span id="msg_password"></span>&nbsp;</td>

          			</tr> 

                <tr>

                    	<td align="right">Confirm Password :</td>

                    	<td align="left">

                    	  <input type="password" id="cpassword" name="cpassword" value="" class="txtBox">

                      </td>

                    	<td align="left"><span id="msg_cpassword"></span>&nbsp;</td>

          			</tr>                                   			

  			   </table>          			

        </div>

  			<div id="step-2">

            <h2 class="StepTitle">Step 2: Profile Details</h2>	

            <table cellspacing="3" cellpadding="3" align="center">

          			<tr>

                    	<td align="center" colspan="3">&nbsp;</td>

          			</tr>        

          			<tr>

                    	<td align="right">First Name :</td>

                    	<td align="left">

                    	  <input type="text" id="firstname" name="firstname" value="" class="txtBox">

                      </td>

                    	<td align="left"><span id="msg_firstname"></span>&nbsp;</td>

          			</tr>

          			<tr>

                    	<td align="right">Last Name :</td>

                    	<td align="left">

                    	  <input type="text" id="lastname" name="lastname" value="" class="txtBox">

                      </td>

                    	<td align="left"><span id="msg_lastname"></span>&nbsp;</td>

          			</tr> 

          			<tr>

                    	<td align="right">Gender :</td>

                    	<td align="left">

                        <select id="gender" name="gender" class="txtBox">

                          <option value="">-select-</option>

                          <option value="Female">Female</option>

                          <option value="Male">Male</option>                 

                        </select>

                      </td>

                    	<td align="left"><span id="msg_gender"></span>&nbsp;</td>

          			</tr>                                   			

  			   </table>        

        </div>                      

  			<div id="step-3">

            <h2 class="StepTitle">Step 3: Contact Details</h2>	

            <table cellspacing="3" cellpadding="3" align="center">

          			<tr>

                    	<td align="center" colspan="3">&nbsp;</td>

          			</tr>        

          			<tr>

                    	<td align="right">Email :</td>

                    	<td align="left">

                    	  <input type="text" id="email" name="email" value="" class="txtBox">

                      </td>

                    	<td align="left"><span id="msg_email"></span>&nbsp;</td>

          			</tr>

          			<tr>

                    	<td align="right">Phone :</td>

                    	<td align="left">

                    	  <input type="text" id="phone" name="phone" value="" class="txtBox">

                      </td>

                    	<td align="left"><span id="msg_phone"></span>&nbsp;</td>

          			</tr>          			

          			<tr>

                    	<td align="right">Address :</td>

                    	<td align="left">

                            <textarea name="address" id="address" class="txtBox" rows="3"></textarea>

                      </td>

                    	<td align="left"><span id="msg_address"></span>&nbsp;</td>

          			</tr>                                   			

  			   </table>               				          

        </div>

  			<div id="step-4">

            <h2 class="StepTitle">Step 4: Other Details</h2>	

            <table cellspacing="3" cellpadding="3" align="center">

          			<tr>

                    	<td align="center" colspan="3">&nbsp;</td>

          			</tr>        

          			<tr>

                    	<td align="right">Hobbies :</td>

                    	<td align="left">

                    	  <input type="text" id="phone" name="phone" value="" class="txtBox">

                      </td>

                    	<td align="left"><span id="msg_phone"></span>&nbsp;</td>

          			</tr>          			

          			<tr>

                    	<td align="right">About You :</td>

                    	<td align="left">

                            <textarea name="address" id="address" class="txtBox" rows="5"></textarea>

                      </td>

                    	<td align="left"><span id="msg_address"></span>&nbsp;</td>

          			</tr>                                   			

  			   </table>                 			

        </div>

  		</div>

<!-- End SmartWizard Content -->  		

</form> 

  		

</td></tr>

</table> 



</body>

</html>

