9 <script src=
"../lib/CGI/Ex/validate.js"></script>
11 if (location.search) {
12 document.writeln('
<span style=
"color:green"><h1>Form Information submitted
</h1></span>');
14 if (! document.validate) {
15 document.writeln('
<span style=
"color:red"><h1>Missing document.validate
</h1>Path to ../lib/CGI/Ex/validate.js may be invalid.
</span>');
17 document.writeln('
<span style=
"color:green"><h1>Found document.validate
</h1></span>');
24 <table cellspacing=
0 cellpadding=
3>
26 <td valign=top
>Username:
</td>
27 <td><input type=text size=
30 name=username
></td>
28 <td id=username_img
></td>
29 <td id=username_error class=error
></td>
32 <td valign=top
>Password:
</td>
33 <td><input type=password size=
30 name=password
><span id=password_strength
style=
"font-size:smaller;color:blue"></span></td>
34 <td id=password_img
></td>
35 <td id=password_error class=error
></td>
38 <td valign=top
>Verify Password:
</td>
39 <td><input type=password size=
30 name=password2
></td>
40 <td id=password2_img
></td>
41 <td id=password2_error class=error
></td>
44 <td valign=top
>Email:
</td>
45 <td><input type=text size=
40 name=email
></td>
46 <td id=email_img
></td>
47 <td id=email_error class=error
></td>
51 <td valign=top
>Verify Email:
</td>
52 <td><input type=text size=
40 name=email2
></td>
53 <td id=email2_img
></td>
54 <td id=email2_error class=error
></td>
57 <td valign=top
>State/Region:
</td>
59 Specify State
<input type=text size=
2 name=state
><br>
60 OR Region
<input type=text size=
20 name=region
>
62 <td id=state_img
></td>
63 <td id=state_error class=error
></td>
66 <td valign=top
>Enum Check:
</td>
67 <td><input type=text size=
10 name=enum
></td>
69 <td id=enum_error class=error
></td>
72 <td valign=top
>Compare Check:
</td>
73 <td><input type=text size=
10 name=compare
></td>
74 <td id=compare_img
></td>
75 <td id=compare_error class=error
></td>
78 <td valign=top
>Check one:
</td>
80 <input type=checkbox name=checkone value=
1> Foo
<br>
81 <input type=checkbox name=checkone value=
2> Bar
<br>
82 <input type=checkbox name=checkone value=
3> Baz
<br>
84 <td id=checkone_img
></td>
85 <td id=checkone_error class=error
></td>
88 <td valign=top
>Check two:
</td>
90 <input type=checkbox name=checktwo value=
1> Foo
<br>
91 <input type=checkbox name=checktwo value=
2> Bar
<br>
92 <input type=checkbox name=checktwo value=
3> Baz
<br>
94 <td id=checktwo_img
></td>
95 <td id=checktwo_error class=error
></td>
97 <tr><td colspan=
2><hr></td></tr>
99 <td valign=top
>Fill In two:
</td>
101 <input type=text name=foo
value=
"" size=
30> Foo
<br>
102 <input type=text name=bar
value=
"" size=
30> Bar
<br>
103 <input type=text name=baz
value=
"" size=
30> Baz
<br>
106 <td id=foo_error class=error
></td>
109 <td colspan=
2 align=right
>
110 <input type=submit value=Submit
>
116 <script src=
"../lib/CGI/Ex/validate.js"></script>
118 document.validate_set_hook = function (args) {
119 document.getElementById(args.key+'_img').innerHTML = '
<span style=
"font-weight:bold;color:red">!
</span>';
120 document.getElementById(args.key+'_row').style.background = '#ffdddd';
122 document.validate_clear_hook = function (args) {
123 if (args.was_valid) {
124 document.getElementById(args.key+'_img').innerHTML = '
<span style=
"font-weight:bold;color:green">+
</span>';
125 document.getElementById(args.key+'_row').style.background = '#ddffdd';
127 document.getElementById(args.key+'_img').innerHTML = '';
128 document.getElementById(args.key+'_row').style.background = '#fff';
131 document.validation = {
132 "group onevent": 'change,blur,submit',
133 "group no_confirm":
1,
135 "group order": ["username", "password", "password2", "email", "email2", "state", "region", "s_r_combo", "enum", "compare", "checkone", "checktwo", "foo"],
147 match: ["m/\\d/", "m/[a-z]/"],
148 match_error: "$name must contain both a letter and a number.",
149 custom_js: function (args) {
152 if (v.match(/[a-z]/)) n++;
153 if (v.match(/[A-Z]/)) n++;
154 if (v.match(/[
0-
9]/)) n++;
155 var sym = v.match(/[ ~!@#$%^&*()_,.?{}\[\]]/) ?
1 :
0;
156 var s = (! v.length) ? ''
157 : (v.length <
6) ? 'weak'
158 : (v.length <
7) ? (sym || n ==
3) ? 'ok' : 'weak'
159 : (v.length <
10) ? (n <
3 && ! sym) ? 'ok' : 'good'
160 : sym ? 'excellent' : 'good';
161 document.getElementById('password_strength').innerHTML = s;
162 if (s === 'weak') throw "Cannot use a weak password. Try increasing the length or adding variation.";
167 validate_if: 'password was_valid',
169 name: "Verify password",
171 equals_name: "password"
178 type_error: "$name must be a valid email address."
181 validate_if: 'email was_valid',
183 name: "Verify email",
188 validate_if: ["state", "! region"],
189 match: "m/^\\w{
2}$/",
190 match_error: "Please type a two letter state code."
193 validate_if: ["region", "! state"],
194 delegate_error: "state",
195 compare: "eq Manitoba",
196 compare_error: "For this test - the region should be Manitoba."
200 delegate_error: "state",
201 max_in_set: "
1 of state region",
202 max_in_set_error: "Specify only one of state and region.",
203 min_in_set: "
1 of state region",
204 min_in_set_error: "Specify one of state and region."
208 'enum': ["one", "two", "three", "four"],
209 enum_error: "$name must be one of one, two, three, or four."
213 required_error: "Please type a number",
215 type_error: 'Please type a valid number',
216 name: "Compare check",
217 compare: ['
> 99', '<
1000'],
218 compare_error: '$name must be greater than
99 and less than
1000.'
231 min_in_set:
"2 of foo bar baz",
232 max_in_set:
"2 of foo bar baz"
235 if (document.check_form) document.check_form('a');
236 // do this in javascript to let the real form through without js
237 document.a.password2.disabled = true;
238 document.a.email2.disabled = true;
242 <script>window.onload = function () { document.a.username.focus() }
</script>