My favorites ▼ | Sign in
Project Home Downloads Wiki Issues Source
Checkout   Browse   Changes    
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<script language="JavaScript" type="text/javascript" src="jquery.js"></script>
	<script language="JavaScript" type="text/javascript" src="jVal.js"></script>
	<link rel="stylesheet" type="text/css" href="jVal.css">
	<style>
		body {
			font-family: Tahoma;
			font-size: 9pt;
		}
		table td {
			 padding:5px;
		}
	</style>
</head>
<body marginheight=0 marginwidth=0 topmargin=0 rightmargin=0 leftmargin=0>
	<table border=0 id="form" style="padding:10px;">
		<tr>
			<td align=right style="padding-right:5px; color:#000;">
				First Name
			</td>
			<td align=left>
				<input id="f1" type="text" size="20"
					jVal="{valid:function (val) { if (val.length < 3) return 'Invalid Name'; else return ''; }}">
			</td>
		</tr>
		<tr>
			<td align=right style="padding-right:5px;color:#000;">
				Email Address
			</td>
			<td align=left>
				<input id="f3" type=text size=40
					jVal="{valid:/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/, message:'Invalid Email Address'}"
					jValKey="{valid:/[a-zA-Z0-9._%+-@]/, cFunc:'alert', cArgs:['Email Address: '+$(this).val()]}">
			</td>
		</tr>
		<tr>
			<td align=right style="padding-right:5px;color:#000;">
				Phone Number<br>
				<span style="color:#808080; font-size:8pt;">10 digits, no dashes</span>
			</td>
			<td align=left>
				<input id="f5" type=text maxlength=10 size=10
					jVal="{valid:function (val) { if (val.length != 10) return false; else return true; }, message:'10 Digits for Phone Required'}"
					jValKey="{valid:/[0-9]/, message:'&quot;%c&quot; Invalid Character - Only Digits Allowed', cFunc:'$(\'#formContainer\').jVal()'}">
			</td>
		</tr>
		<tr>
			<td align=right style="padding-right:5px;color:#000;">
				Password
			</td>
			<td align=left>
				<input id="password" type=text
					jVal="{valid:function (val) { if (val.length < 4) return false; else return true; }, message:'Password of 4 or more characters required'}">
			</td>
		</tr>
		<tr>
			<td align=right style="padding-right:5px;color:#000;">
				Verify Password
			</td>
			<td align=left>
				<input id="passwordVerify" type=text
					jVal="{valid:function (val) { if ( val != eval('$(\'#password\').val()') ) return false; else return true; }, message:'Password and Verify Password Must Match'}">
			</td>
		</tr>
		<tr>
			<td align="right">
				Date of Birth
			</td>
			<td align="left">
				<table class="birth_dateTable" cellpadding="0" cellspacing="0">
					<tr>
						<td>
							<select id="birth_dateMonth">
								<option value="1">1-Jan</option><option value="2">2-Feb</option><option value="3">3-Mar</option><option value="4">4-Apr</option><option value="5">5-May</option><option value="6">6-Jun</option><option value="7">7-Jul</option><option value="8">8-Aug</option><option value="9">9-Sep</option><option value="10">10-Oct</option><option value="11">11-Nov</option><option value="12">12-Dec</option>
							</select>
						</td><td>
							<select id="birth_dateDay">
								<option value="1">01</option><option value="2">02</option><option value="3">03</option><option value="4">04</option><option value="5">05</option><option value="6">06</option><option value="7">07</option><option value="8">08</option><option value="9">09</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option>
							</select>
						</td><td>
							<input id="birth_dateYear" type="text" maxlength=4 size=4
								jVal="{valid:function (val) { if (val.length != 4) return false; else return true; }, message:'YYYY for year required'}"
								jValKey="{valid:/[0-9]/, message:'&quot;%c&quot; Invalid - digits only for year', cFunc:'$(\'#submitButton\').click();'}">
						</td>
					</tr>
				</table>
			</td>
		</tr>
		<tr>
			<td align="right" class="requiredFieldTitle">
				Weight
			</td>
			<td align="left">

				<input name="weight" type="text" size="4" maxlength="4" class="requiredField"
					jVal="{valid:function (val) { if ( parseFloat( val ) > 10 && parseFloat( val ) < 400 ) return ''; else return 'Invalid weight'; }, target:$('input[name=weight], select[name=weightUnits]')}"
					jValKey="{valid:/[0-9.]/, cFunc:'$(\'#signUpFormSubmit\').click();', target:$('input[name=weight], select[name=weightUnits]').get()}" />

				<select name="weightUnits">
					<option value="lb">lb</option>
					<option value="kg">kg</option>
				</select>
			</td>
		</tr>

		<tr>
			<td></td>
			<td style="padding:5px;">
				<input id="submitButton" type=button value="jVal POD validation" onClick="if ( $('#form').jVal({style:'pod',padding:3,border:1,wrap:true}) ) alert('success - submit form');">
				<input id="submitButton" type=button value="jVal COVER validation" onClick="if ( $('#form').jVal({style:'cover',padding:3,border:1,wrap:true}) ) alert('success - submit form');">
				<input id="submitButton" type=button value="jVal BLANK validation" onClick="if ( $('#form').jVal({style:'blank',padding:8,border:0,wrap:false}) ) alert('success - submit form');">
			</td>
		</tr>
	</table>

</body>
</html>

Change log

r26 by jimpalmer on Sep 25, 2009   Diff 
better integrated example + fix
showwarning instantiation
Go to: 
Project members, sign in to write a code review

Older revisions

r23 by jimpalmer on Sep 25, 2009   Diff 
support for attribute or onload jval
event binding + ability to disable
blur per field + more code cleanup +
less jquery namespace clutter and
public clean, init and showwarning
...
r10 by jimpalmer on Nov 14, 2008   Diff 
0.1.4
r6 by jimpalmer on Nov 14, 2008   Diff 
0.1.2
All revisions of this file

File info

Size: 5701 bytes, 119 lines
Powered by Google Project Hosting