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>
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>
10 <script type="text/javascript">
11 $(document).ready(function(){
13 $('#wizard').smartWizard({transitionEffect:'slideleft',onLeaveStep:leaveAStepCallback,onFinish:onFinishCallback,enableFinishButton:true});
15 function leaveAStepCallback(obj){
16 var step_num= obj.attr('rel');
17 return validateSteps(step_num);
20 function onFinishCallback(){
21 if(validateAllSteps()){
27 function validateAllSteps(){
28 var isStepValid = true;
30 if(validateStep1() == false){
32 $('#wizard').smartWizard('setError',{stepnum:1,iserror:true});
34 $('#wizard').smartWizard('setError',{stepnum:1,iserror:false});
37 if(validateStep3() == false){
39 $('#wizard').smartWizard('setError',{stepnum:3,iserror:true});
41 $('#wizard').smartWizard('setError',{stepnum:3,iserror:false});
45 $('#wizard').smartWizard('showMessage','Please correct the errors in the steps and continue');
52 function validateSteps(step){
53 var isStepValid = true;
56 if(validateStep1() == false ){
58 $('#wizard').smartWizard('showMessage','Please correct the errors in step'+step+ ' and click next.');
59 $('#wizard').smartWizard('setError',{stepnum:step,iserror:true});
61 $('#wizard').smartWizard('setError',{stepnum:step,iserror:false});
67 if(validateStep3() == false ){
69 $('#wizard').smartWizard('showMessage','Please correct the errors in step'+step+ ' and click next.');
70 $('#wizard').smartWizard('setError',{stepnum:step,iserror:true});
72 $('#wizard').smartWizard('setError',{stepnum:step,iserror:false});
79 function validateStep1(){
82 var un = $('#username').val();
83 if(!un && un.length <= 0){
85 $('#msg_username').html('Please fill username').show();
87 $('#msg_username').html('').hide();
91 var pw = $('#password').val();
92 if(!pw && pw.length <= 0){
94 $('#msg_password').html('Please fill password').show();
96 $('#msg_password').html('').hide();
99 // validate confirm password
100 var cpw = $('#cpassword').val();
101 if(!cpw && cpw.length <= 0){
103 $('#msg_cpassword').html('Please fill confirm password').show();
105 $('#msg_cpassword').html('').hide();
108 // validate password match
109 if(pw && pw.length > 0 && cpw && cpw.length > 0){
112 $('#msg_cpassword').html('Password mismatch').show();
114 $('#msg_cpassword').html('').hide();
120 function validateStep3(){
122 //validate email email
123 var email = $('#email').val();
124 if(email && email.length > 0){
125 if(!isValidEmailAddress(email)){
127 $('#msg_email').html('Email is invalid').show();
129 $('#msg_email').html('').hide();
133 $('#msg_email').html('Please enter email').show();
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);
148 <table align="center" border="0" cellpadding="0" cellspacing="0">
151 if(isset($_REQUEST['issubmit'])){
152 echo "<strong>form is sumbitted</strong>";
157 <form action="#" method="POST">
158 <input type='hidden' name="issubmit" value="1">
160 <div id="wizard" class="swMain">
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>
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>
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>
183 <li><a href="#step-4">
184 <span class="stepNumber">3</span>
185 <span class="stepDesc">
187 <small>Fill your other details</small>
192 <h2 class="StepTitle">Step 1: Account Details</h2>
193 <table cellspacing="3" cellpadding="3" align="center">
195 <td align="center" colspan="3"> </td>
198 <td align="right">Username :</td>
200 <input type="text" id="username" name="username" value="" class="txtBox">
202 <td align="left"><span id="msg_username"></span> </td>
205 <td align="right">Password :</td>
207 <input type="password" id="password" name="password" value="" class="txtBox">
209 <td align="left"><span id="msg_password"></span> </td>
212 <td align="right">Confirm Password :</td>
214 <input type="password" id="cpassword" name="cpassword" value="" class="txtBox">
216 <td align="left"><span id="msg_cpassword"></span> </td>
221 <h2 class="StepTitle">Step 2: Profile Details</h2>
222 <table cellspacing="3" cellpadding="3" align="center">
224 <td align="center" colspan="3"> </td>
227 <td align="right">First Name :</td>
229 <input type="text" id="firstname" name="firstname" value="" class="txtBox">
231 <td align="left"><span id="msg_firstname"></span> </td>
234 <td align="right">Last Name :</td>
236 <input type="text" id="lastname" name="lastname" value="" class="txtBox">
238 <td align="left"><span id="msg_lastname"></span> </td>
241 <td align="right">Gender :</td>
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>
249 <td align="left"><span id="msg_gender"></span> </td>
254 <h2 class="StepTitle">Step 3: Contact Details</h2>
255 <table cellspacing="3" cellpadding="3" align="center">
257 <td align="center" colspan="3"> </td>
260 <td align="right">Email :</td>
262 <input type="text" id="email" name="email" value="" class="txtBox">
264 <td align="left"><span id="msg_email"></span> </td>
267 <td align="right">Phone :</td>
269 <input type="text" id="phone" name="phone" value="" class="txtBox">
271 <td align="left"><span id="msg_phone"></span> </td>
274 <td align="right">Address :</td>
276 <textarea name="address" id="address" class="txtBox" rows="3"></textarea>
278 <td align="left"><span id="msg_address"></span> </td>
283 <h2 class="StepTitle">Step 4: Other Details</h2>
284 <table cellspacing="3" cellpadding="3" align="center">
286 <td align="center" colspan="3"> </td>
289 <td align="right">Hobbies :</td>
291 <input type="text" id="phone" name="phone" value="" class="txtBox">
293 <td align="left"><span id="msg_phone"></span> </td>
296 <td align="right">About You :</td>
298 <textarea name="address" id="address" class="txtBox" rows="5"></textarea>
300 <td align="left"><span id="msg_address"></span> </td>
305 <!-- End SmartWizard Content -->