README: updated the db migration steps
[myslice.git] / 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>