--- /dev/null
+<!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/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>
+
+<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">
+ <span class="stepNumber">1</span>
+ <span class="stepDesc">
+ Account Details<br />
+ <small>Fill your account details</small>
+ </span>
+ </a></li>
+ <li><a href="#step-2">
+ <span class="stepNumber">2</span>
+ <span class="stepDesc">
+ Profile Details<br />
+ <small>Fill your profile details</small>
+ </span>
+ </a></li>
+ <li><a href="#step-3">
+ <span class="stepNumber">3</span>
+ <span class="stepDesc">
+ Contact Details<br />
+ <small>Fill your contact details</small>
+ </span>
+ </a></li>
+ <li><a href="#step-4">
+ <span class="stepNumber">3</span>
+ <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"> </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> </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> </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> </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"> </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> </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> </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> </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"> </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> </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> </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> </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"> </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> </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> </td>
+ </tr>
+ </table>
+ </div>
+ </div>
+<!-- End SmartWizard Content -->
+</form>
+
+</td></tr>
+</table>
+
+</body>
+</html>
git://git.onelab.eu / myslice.git / blobdiff