-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·282 lines (272 loc) · 12.1 KB
/
index.html
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
<!DOCTYPE html>
<html>
<head>
<title>Instantiate! Instant form validation.</title>
<!-- Load CSS first to allow parallel downloading -->
<!-- main CSS --><link href="css/main.css" rel="stylesheet">
<!--[if lt IE 9]><link href="css/ltIE9.css" rel="stylesheet"><![endif]-->
<!-- Load Javascript -->
<!-- jQuery --><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<!--[if lt IE 9]><script src="js/html5shiv.js"></script><![endif]-->
<!-- main JS --><script src="js/main.js" ></script>
</head>
<body>
<div id="container">
<header>
<h1>Instantiate!</h1>
<h2 class="subheader">Instant Form Validation</h2>
</header>
<form class="main form validate">
<div class="row">
<p><b>Instantiate!</b> is a jQuery plugin to instantly validate form inputs on a per-input basis. As soon as a user leaves an input, it is validated and error messages are presented right on the form. Then, while the user is correcting the input, it is validated with each keystroke until it is corrected.</p>
<p>All form controls are automatically validated on blur, if any are enabled for that input. There are several types of validation possible, checked starting with the simplest cases and moving to more complex cases. If an input fails a simple case, validation stops and does not evaluate more complicated cases. If all validation passes, a brief green flash indicates that the input has passed validation.</p>
</div>
<h2>No Validation</h2>
<pre class="row">
<code><input type="text" class="full"
placeholder="Just don't use the 'required' parameter!"
></code>
</pre>
<div class="control row example">
<label>This is Optional</label>
<div class="controls">
<input type="text" class="full" placeholder="Just don't use the 'required' parameter!" >
</div>
</div>
<h2>Required Validation</h2>
<div class="row">
<p>Simply use the <code>required</code> attribute to force something, anything, to be entered. Modern browsers will do their own check onsubmit to make sure the field is filled, but our validate() function does it onblur.</p>
</div>
<pre class="row">
<code><input type="text" class="full"
placeholder="I can't be blank!"
<b>required</b>></code>
</pre>
<div class="control row example">
<label>This is Required</label>
<div class="controls">
<input type="text" class="full"
placeholder="I can't be blank!"
required>
</div>
</div>
<h2>Pattern Validation</h2>
<div class="row">
<p>HTML5 introduced the <code>pattern</code> attribute. Put a regular expression as the value. It's ok to use <a href="http://html5pattern.com">patterns other people made</a> or <a href="http://regexlib.com/"></a>look up a specific regular expression</a>. I usually test my regex patterns with <a href="http://www.rubular.com">rubular</a>. Modern browsers will automatically make sure that the value meets the requirements of the pattern onsubmit. But again, we make use of it sooner, onblur.</p>
<p>Whenever you specify a <code>pattern</code>, you should provide a description of that pattern, so that users can know what the requirements are. To do this, simply add the attribute <code>data-pattern-desc</code>, and provide a description of the requirements that will be shown when they get it wrong. Be as exhaustive as you can in the description, yet terse.</p>
</div>
<pre class="row">
<code><input type="text" class="full"
placeholder="Enter username"
required
<b>pattern</b>="[a-zA-Z][a-zA-Z0-9-_\.]{7,}"
<b>data-pattern-desc</b>="Must start with a letter, be a minimum of 8 characters. Only numbers and letters are allowed."></code>
</pre>
<div class="control row example">
<label>Create a Username</label>
<div class="controls">
<input type="text" class="full"
placeholder="Enter username"
required
pattern="[a-zA-Z][a-zA-Z0-9-_\.]{7,}"
data-pattern-desc="Must start with a letter, be a minimum of 8 characters. Only numbers and letters are allowed."
>
<div class="validation username"></div>
</div>
</div>
<h2>Ajax Validation</h2>
<div class="row">
<p>For validation that is more complicated than meeting a regular expression, use Ajax validation. There are two steps.</p>
<ol>
<li>Add the <code>data-ajax-validate</code> attribute, and for it's value, put the filename of the backend PHP script that you want to do the validating (e.g. put "<code>username</code>" for "<code>ajax/username.php</code>").</li>
<li>Now create a PHP script with the same name and put it inside the folder <code>/ajax/</code>. The script POST recieves the value of the field with the name "<code>userInput</code>", so you could do something like <code>$_POST['userInput']</code> to get it. The script should return a JSON array containing the value <code>passedValidation</code>, which is <code>true</code> if it passed and <code>false</code> if it failed validation. You need to also include the value <code>desc</code> when it fails validation, which contains a description of the field requirements or a reason that it failed to validate. This will go in the error tip.</li>
</ol>
<p class="note">If the user has previously failed <code>pattern</code> or some other validation, the error tip will change when they move on to Ajax validation. See demo below for an example.</p>
</div>
<pre class="row">
<code><input type="text" class="full"
placeholder="Enter username"
required
pattern="[a-zA-Z][a-zA-Z0-9-_\.]{7,}"
data-pattern-desc="Must start with a letter, be a minimum of 8 characters. Only numbers and letters are allowed."
<b>data-ajax-validate</b>="username"></code>
</pre>
<div class="control row example">
<label>Create a Username</label>
<div class="controls">
<input type="text" class="full"
placeholder="Enter username"
required
pattern="[a-zA-Z][a-zA-Z0-9-_\.]{7,}"
data-pattern-desc="Must start with a letter, be a minimum of 8 characters. Only numbers and letters are allowed."
data-ajax-validate="demo"
>
<div class="validation username"></div>
</div>
</div>
<h2>Running an Arbitrary Function</h2>
<div class="row">
<p>For cases where additional actions must be taken, or the validation requires interaction with other elements on the page, you can create a Javascript function to do anything you want. Use the attribute <code>data-func</code>, and specify the complete function call as the value. For example, if your function is named reType, enter: <code>reType($elem, $('#password'));</code>. See below for examples of existing functions.</p>
</div>
<h3>reType()</h3>
<div class="row">
<p>Confirm that text in current element (first parameter, which is always "<code>$elem</code>") matches a specified element (second parameter.)</p>
</div>
<pre class="row">
<code>function <b>reType</b>($elem, $origElem) {
//matches
if($elem.val() == $origElem.val()){
return true;
//failed to match
} else {
$elem.addClass("error");
$elem.attr("data-errMsg", "This field must match the specified field exactly.");
return false;
}
}</code>
</pre>
<pre class="row">
<code><input type="password" class="full"
placeholder="Re-enter password"
<b>data-func="reType($elem, $('#password'));"</b>></code>
</pre>
<div class="example">
<div class="control row">
<label>Choose a password</label>
<div class="controls">
<input type="password" class="full" id="password" placeholder="Enter Password">
</div>
</div>
<div class="control row">
<label>Re-enter password</label>
<div class="controls">
<input type="password" class="full"
placeholder="Re-enter password"
data-func="reType($elem, $('#password'));">
</div>
</div>
</div>
<h3>emailCheck()</h3>
<div class="row">
<p>Use built-in browser email validation to check input value (only one parameter, which is always "<code>$elem</code>").</p>
</div>
<pre class="row">
<code>function <b>emailCheck</b>($elem) {
if($elem[0].checkValidity()){
return true;
} else {
$elem.addClass("error");
$elem.attr("data-errMsg", "Must be a valid email address.");
return false;
}
}</code>
</pre>
<pre class="row">
<code><input type="email" class="full"
placeholder="Enter Email"
<b>data-func="emailCheck($elem);"</b>></code>
</pre>
<div class="control row example">
<label>Enter email address</label>
<div class="controls">
<input type="email" class="full" id="email" name="email"
placeholder="[email protected]"
data-func="emailCheck($elem)">
</div>
</div>
<h3>duplicate()</h3>
<div class="row">
<p>Copy value (first parameter, which is always "<code>$elem</code>") to specified element (second parameter). Always returns true (not actually validating anything).</p>
</div>
<pre class="row">
<code>function <b>duplicate</b>($elem, $targetElem) {
$targetElem.val($elem.val());
return true;
}</code>
</pre>
<pre class="row">
<code><input type="text" class="full" id="address1" name="address1"
placeholder="1234 Example Street"
<b>data-func="duplicate($elem, $('#billingAddress1'))"</b>></code>
</pre>
<div class="example">
<div class="control row">
<label for="address1">Home Address</label>
<div class="controls">
<input type="text" class="full" id="address1" name="address1"
placeholder="1234 Example Street"
data-func="duplicate($elem, $('#billingAddress1'))">
</div>
</div>
<div class="control row">
<label for="address1">Billing Address</label>
<div class="controls">
<input type="text" class="full" id="billingAddress1" name="billingAddress1" value="watch me change" disabled>
</div>
</div>
</div>
<h3>emailCheck()</h3>
<div class="row">
<p>Use built-in browser email validation to check input value (only one parameter, which is always "<code>$elem</code>").</p>
</div>
<pre class="row">
<code>function <b>emailCheck</b>($elem) {
if($elem[0].checkValidity()){
return true;
} else {
$elem.addClass("error");
$elem.attr("data-errMsg", "Must be a valid email address.");
return false;
}
}</code>
</pre>
<pre class="row">
<code><input type="email" class="full"
placeholder="Enter Email"
<b>data-func="emailCheck($elem);"</b>></code>
</pre>
<div class="control row example">
<label>Enter email address</label>
<div class="controls">
<input type="email" class="full" id="email" name="email"
placeholder="[email protected]"
data-func="emailCheck($elem)">
</div>
</div>
<h3>stripSpecial()</h3>
<div class="row">
<p>Remove non-digit characters from value to simplify validation in some cases (e.g. makes 123-45-678 into 12345678). Takes only one parameter, which is always "<code>$elem</code>". Always returns true (not actually validating anything).</p>
</div>
<pre class="row">
<code>function <b>stripSpecial</b>($elem) {
$elem.val($elem.val().replace(/\D/,""));
return true;
}</code>
</pre>
<pre class="row">
<code><input type="text" class="full" id="ssn" name="ssn"
placeholder="Try putting some dashes or spaces."
required
<b>data-func="stripSpecial($elem);"</b>
pattern="^(\d{3}-*?\d{2}-*?\d{4})$"
data-pattern-desc="Must be a valid Social Security number, e.g. 555-55-5555."></code>
</pre>
<div class="control row example">
<label for="ssn">Social Security No.</label>
<div class="controls">
<input type="text" class="full" id="ssn" name="ssn"
placeholder="Try putting some dashes or spaces."
required
data-func="stripSpecial($elem);"
pattern="^(\d{3}-*?\d{2}-*?\d{4})$"
data-pattern-desc="Must be a valid Social Security number, e.g. 555-55-5555.">
</div>
</div>
<h2>All of the Above</h2>
<div class="row">
<p>A form can have any combination of validations--even all of them. The script is optimized so that it does not take any additional time to process a form with many types of validation.</p>
</div>
</form>
</div>
</body>
</html>