third-party/smartwizard-1636c86/smartwizard2-validation.php

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   2 <html xmlns="http://www.w3.org/1999/xhtml"><head>
   3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   4 <title>Smart Wizard 2 - Step Validation Example - a javascript jQuery wizard control plugin</title>
   5
   6 <link href="styles/smart_wizard.css" rel="stylesheet" type="text/css">
   7 <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
   8 <script type="text/javascript" src="js/jquery.smartWizard-2.0.min.js"></script>
   9
  10 <script type="text/javascript">
  11     $(document).ready(function(){
  12         // Smart Wizard
  13                 $('#wizard').smartWizard({transitionEffect:'slideleft',onLeaveStep:leaveAStepCallback,onFinish:onFinishCallback,enableFinishButton:true});
  14
  15       function leaveAStepCallback(obj){
  16         var step_num= obj.attr('rel');
  17         return validateSteps(step_num);
  18       }
  19
  20       function onFinishCallback(){
  21        if(validateAllSteps()){
  22         $('form').submit();
  23        }
  24       }
  25                 });
  26
  27     function validateAllSteps(){
  28        var isStepValid = true;
  29
  30        if(validateStep1() == false){
  31          isStepValid = false;
  32          $('#wizard').smartWizard('setError',{stepnum:1,iserror:true});
  33        }else{
  34          $('#wizard').smartWizard('setError',{stepnum:1,iserror:false});
  35        }
  36
  37        if(validateStep3() == false){
  38          isStepValid = false;
  39          $('#wizard').smartWizard('setError',{stepnum:3,iserror:true});
  40        }else{
  41          $('#wizard').smartWizard('setError',{stepnum:3,iserror:false});
  42        }
  43
  44        if(!isStepValid){
  45           $('#wizard').smartWizard('showMessage','Please correct the errors in the steps and continue');
  46        }
  47
  48        return isStepValid;
  49     }
  50
  51
  52                 function validateSteps(step){
  53                   var isStepValid = true;
  54       // validate step 1
  55       if(step == 1){
  56         if(validateStep1() == false ){
  57           isStepValid = false;
  58           $('#wizard').smartWizard('showMessage','Please correct the errors in step'+step+ ' and click next.');
  59           $('#wizard').smartWizard('setError',{stepnum:step,iserror:true});
  60         }else{
  61           $('#wizard').smartWizard('setError',{stepnum:step,iserror:false});
  62         }
  63       }
  64
  65       // validate step3
  66       if(step == 3){
  67         if(validateStep3() == false ){
  68           isStepValid = false;
  69           $('#wizard').smartWizard('showMessage','Please correct the errors in step'+step+ ' and click next.');
  70           $('#wizard').smartWizard('setError',{stepnum:step,iserror:true});
  71         }else{
  72           $('#wizard').smartWizard('setError',{stepnum:step,iserror:false});
  73         }
  74       }
  75
  76       return isStepValid;
  77     }
  78
  79                 function validateStep1(){
  80        var isValid = true;
  81        // Validate Username
  82        var un = $('#username').val();
  83        if(!un && un.length <= 0){
  84          isValid = false;
  85          $('#msg_username').html('Please fill username').show();
  86        }else{
  87          $('#msg_username').html('').hide();
  88        }
  89
  90        // validate password
  91        var pw = $('#password').val();
  92        if(!pw && pw.length <= 0){
  93          isValid = false;
  94          $('#msg_password').html('Please fill password').show();
  95        }else{
  96          $('#msg_password').html('').hide();
  97        }
  98
  99        // validate confirm password
 100        var cpw = $('#cpassword').val();
 101        if(!cpw && cpw.length <= 0){
 102          isValid = false;
 103          $('#msg_cpassword').html('Please fill confirm password').show();
 104        }else{
 105          $('#msg_cpassword').html('').hide();
 106        }
 107
 108        // validate password match
 109        if(pw && pw.length > 0 && cpw && cpw.length > 0){
 110          if(pw != cpw){
 111            isValid = false;
 112            $('#msg_cpassword').html('Password mismatch').show();
 113          }else{
 114            $('#msg_cpassword').html('').hide();
 115          }
 116        }
 117        return isValid;
 118     }
 119
 120     function validateStep3(){
 121       var isValid = true;
 122       //validate email  email
 123       var email = $('#email').val();
 124        if(email && email.length > 0){
 125          if(!isValidEmailAddress(email)){
 126            isValid = false;
 127            $('#msg_email').html('Email is invalid').show();
 128          }else{
 129           $('#msg_email').html('').hide();
 130          }
 131        }else{
 132          isValid = false;
 133          $('#msg_email').html('Please enter email').show();
 134        }
 135       return isValid;
 136     }
 137
 138     // Email Validation
 139     function isValidEmailAddress(emailAddress) {
 140       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);
 141       return pattern.test(emailAddress);
 142     }
 143
 144
 145 </script>
 146 </head><body>
 147
 148 <table align="center" border="0" cellpadding="0" cellspacing="0">
 149 <tr><td>
 150 <?
 151    if(isset($_REQUEST['issubmit'])){
 152       echo "<strong>form is sumbitted</strong>";
 153    }
 154
 155 ?>
 156
 157 <form action="#" method="POST">
 158   <input type='hidden' name="issubmit" value="1">
 159 <!-- Tabs -->
 160                 <div id="wizard" class="swMain">
 161                         <ul>
 162                                 <li><a href="#step-1">
 163                 <span class="stepNumber">1</span>
 164                 <span class="stepDesc">
 165                    Account Details<br />
 166                    <small>Fill your account details</small>
 167                 </span>
 168             </a></li>
 169                                 <li><a href="#step-2">
 170                 <span class="stepNumber">2</span>
 171                 <span class="stepDesc">
 172                    Profile Details<br />
 173                    <small>Fill your profile details</small>
 174                 </span>
 175             </a></li>
 176                                 <li><a href="#step-3">
 177                 <span class="stepNumber">3</span>
 178                 <span class="stepDesc">
 179                    Contact Details<br />
 180                    <small>Fill your contact details</small>
 181                 </span>
 182              </a></li>
 183                                 <li><a href="#step-4">
 184                 <span class="stepNumber">3</span>
 185                 <span class="stepDesc">
 186                    Other Details<br />
 187                    <small>Fill your other details</small>
 188                 </span>
 189             </a></li>
 190                         </ul>
 191                         <div id="step-1">
 192             <h2 class="StepTitle">Step 1: Account Details</h2>
 193             <table cellspacing="3" cellpadding="3" align="center">
 194                                 <tr>
 195                         <td align="center" colspan="3">&nbsp;</td>
 196                                 </tr>
 197                                 <tr>
 198                         <td align="right">Username :</td>
 199                         <td align="left">
 200                           <input type="text" id="username" name="username" value="" class="txtBox">
 201                       </td>
 202                         <td align="left"><span id="msg_username"></span>&nbsp;</td>
 203                                 </tr>
 204                                 <tr>
 205                         <td align="right">Password :</td>
 206                         <td align="left">
 207                           <input type="password" id="password" name="password" value="" class="txtBox">
 208                       </td>
 209                         <td align="left"><span id="msg_password"></span>&nbsp;</td>
 210                                 </tr>
 211                 <tr>
 212                         <td align="right">Confirm Password :</td>
 213                         <td align="left">
 214                           <input type="password" id="cpassword" name="cpassword" value="" class="txtBox">
 215                       </td>
 216                         <td align="left"><span id="msg_cpassword"></span>&nbsp;</td>
 217                                 </tr>
 218                            </table>
 219         </div>
 220                         <div id="step-2">
 221             <h2 class="StepTitle">Step 2: Profile Details</h2>
 222             <table cellspacing="3" cellpadding="3" align="center">
 223                                 <tr>
 224                         <td align="center" colspan="3">&nbsp;</td>
 225                                 </tr>
 226                                 <tr>
 227                         <td align="right">First Name :</td>
 228                         <td align="left">
 229                           <input type="text" id="firstname" name="firstname" value="" class="txtBox">
 230                       </td>
 231                         <td align="left"><span id="msg_firstname"></span>&nbsp;</td>
 232                                 </tr>
 233                                 <tr>
 234                         <td align="right">Last Name :</td>
 235                         <td align="left">
 236                           <input type="text" id="lastname" name="lastname" value="" class="txtBox">
 237                       </td>
 238                         <td align="left"><span id="msg_lastname"></span>&nbsp;</td>
 239                                 </tr>
 240                                 <tr>
 241                         <td align="right">Gender :</td>
 242                         <td align="left">
 243                         <select id="gender" name="gender" class="txtBox">
 244                           <option value="">-select-</option>
 245                           <option value="Female">Female</option>
 246                           <option value="Male">Male</option>
 247                         </select>
 248                       </td>
 249                         <td align="left"><span id="msg_gender"></span>&nbsp;</td>
 250                                 </tr>
 251                            </table>
 252         </div>
 253                         <div id="step-3">
 254             <h2 class="StepTitle">Step 3: Contact Details</h2>
 255             <table cellspacing="3" cellpadding="3" align="center">
 256                                 <tr>
 257                         <td align="center" colspan="3">&nbsp;</td>
 258                                 </tr>
 259                                 <tr>
 260                         <td align="right">Email :</td>
 261                         <td align="left">
 262                           <input type="text" id="email" name="email" value="" class="txtBox">
 263                       </td>
 264                         <td align="left"><span id="msg_email"></span>&nbsp;</td>
 265                                 </tr>
 266                                 <tr>
 267                         <td align="right">Phone :</td>
 268                         <td align="left">
 269                           <input type="text" id="phone" name="phone" value="" class="txtBox">
 270                       </td>
 271                         <td align="left"><span id="msg_phone"></span>&nbsp;</td>
 272                                 </tr>
 273                                 <tr>
 274                         <td align="right">Address :</td>
 275                         <td align="left">
 276                             <textarea name="address" id="address" class="txtBox" rows="3"></textarea>
 277                       </td>
 278                         <td align="left"><span id="msg_address"></span>&nbsp;</td>
 279                                 </tr>
 280                            </table>
 281         </div>
 282                         <div id="step-4">
 283             <h2 class="StepTitle">Step 4: Other Details</h2>
 284             <table cellspacing="3" cellpadding="3" align="center">
 285                                 <tr>
 286                         <td align="center" colspan="3">&nbsp;</td>
 287                                 </tr>
 288                                 <tr>
 289                         <td align="right">Hobbies :</td>
 290                         <td align="left">
 291                           <input type="text" id="phone" name="phone" value="" class="txtBox">
 292                       </td>
 293                         <td align="left"><span id="msg_phone"></span>&nbsp;</td>
 294                                 </tr>
 295                                 <tr>
 296                         <td align="right">About You :</td>
 297                         <td align="left">
 298                             <textarea name="address" id="address" class="txtBox" rows="5"></textarea>
 299                       </td>
 300                         <td align="left"><span id="msg_address"></span>&nbsp;</td>
 301                                 </tr>
 302                            </table>
 303         </div>
 304                 </div>
 305 <!-- End SmartWizard Content -->
 306 </form>
 307
 308 </td></tr>
 309 </table>
 310
 311 </body>
 312 </html>