-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
271 lines (260 loc) · 11.9 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
<!DOCTYPE html>
<html>
<head>
<title>Validation Tester</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="style.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="jquery.js"%3E%3C/script%3E'))</script>
<script src='checkValidity.js'></script>
<script src='codemirror/js/codemirror.js'></script>
<script src='http://dpatru.github.com/lazydoc/lazydoc.js'></script>
<script>$(document).ready(function(){$('textarea.eg').lazydoc();});</script>
</head>
<body>
<header><h1>checkValidity html5</h1></header>
<article>
<h1>checkValidity([options]) <span class="returns">Returns: <a href="http://docs.jquery.com/Types#jQuery">jQuery</a></span></h1>
<p>
Called with no arguments, checkValidity calls its init method. The init method binds two classes of events: events which should trigger validation and the events triggered by the validation process itself and the reset event. By default, the events triggering validation are 'change' and 'submit'. The validation process triggers an 'invalid' or 'valid' event depending on the result of the validation. By default, the event handlers for the 'invalid', 'valid', and 'reset' events set class names on the input element and its labels and populate any element in the label classed 'error' with the validation message.
</p>
<h2>Example: calling with default arguments.</h2>
<p class="eg">
<textarea class="eg">
<style>
input.invalid, textarea.invalid {
background-image: url("images/cross.png");
}
input.valid, textarea.valid {
background-image: url(images/accept.png);
}
input, textarea {
background-position: right top;
background-repeat: no-repeat;
}
label, input, textarea {display:block}
label {margin-bottom: 5px;}
.error {color: red}
</style>
<form>
<label> field text
<span class="error"></span>
<input type="text" required="true" value=""/>
</label>
<label> number
<span class="error"></span>
<input type="number" required="true"/>
</label>
<label> url
<span class="error"></span>
<input type="url" required="true"/>
</label>
<input type="submit" value="submit">
<input type="reset" value="reset">
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script src="checkValidity.js"></script>
<script>
$(document).ready(function(){
$('form').checkValidity({
validateEvents: 'submit',
reset: function(){
$('textarea, input', this).reset();
}
});
$('input:not([type=submit])').checkValidity({validateEvents: 'change'});
});
</script>
</textarea>
</p>
<p>
You can overide the default behavior by calling checkValidity with your own options. Note how the input element's class is not changed if the default handlers are overridden in the example below.
</p>
<h2>Example: Calling with custom event handlers.</h2>
<p class='eg'>
<textarea class="eg">
<style>
input.invalid, textarea.invalid {
background-image: url("images/cross.png");
}
input.valid, textarea.valid {
background-image: url(images/accept.png);
}
input, textarea {
background-position: right top;
background-repeat: no-repeat;
}
label, input, textarea {display:block}
label {margin-bottom: 5px;}
.error {color: red}
</style>
<form>
<label> field text
<span class="error"></span>
<input type="text" required="true" value=""/>
</label>
<label> number
<span class="error"></span>
<input type="number" required="true"/>
</label>
<label> url
<span class="error"></span>
<input type="url" required="true"/>
</label>
<input type="submit" value="submit">
<input type="reset" value="reset">
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script src="checkValidity.js"></script>
<script>
$(document).ready(function(){
function report(el, str){
var nodeName = el.nodeName, type = nodeName == 'INPUT'? el.getAttribute('type'): '';
alert(nodeName + (type? '['+type+']': '') + ' ' + str);
};
var opts = {
reset: function(){report(this, 'reset'); },
valid: function(){report(this, 'valid'); return false; },
invalid: function(){report(this, 'invalid'); return false; },
validateEvents: 'submit'
};
$('form, :input').checkValidity(opts);
});
</script>
</textarea>
</p>
</article>
<article>
<h1>options</h1>
<p>
CheckValidity accepts the following options.
<dl>
<dt>live: boolean</dt>
<dd>If this is true, events will be attached using .live. Default is true.</dd>
<dt>validateEvents: string</dt>
<dd>Defines which events will trigger validity checks. Default is 'change submit'.</dd>
<dt>resetEvents: string</dt>
<dd>Defines which events will trigger validity checks. Default is 'reset'.</dd>
<dt>valid: function</dt>
<dd>Specifies which function will be called on valid events. By default, the default all the validity event handlers (for valid, invalid, and reset) set classes on the element and its labels while removing non-corresponding classes. Also, they set the html of any elements classed 'error' in the label with the validation message.
</dd>
<dt>invalid, reset: functions</dt>
<dd>See valid above.</dd>
<dt>errorClass: string</dt>
<dd>Specifies which class will receive the validation message on validation failures. See valid above. Default is 'error'.</dd>
<dt>setCustomError: function ( value, el, errorMessage ){ . . . }</dt>
<dd>After an element is validated, its <a href="http://www.w3.org/TR/html5/association-of-controls-and-forms.html#dom-cva-validity">validity</a> properties are set and setCustomError is called on its value, also passed are the element itself and the errorMessage object. The element's <a href="http://www.w3.org/TR/html5/association-of-controls-and-forms.html#dom-cva-validationmessage">validationMessage</a> is set to the value returned. By default, the customError function concatenates the error strings in the errorMessage object which correspond to the true properties of the element's validity attribute. So, for example, if the element's value is too long and doesn't match the pattern, the validity object will be {tooLong: true, patternMismatch: true, . . . } and the validationMessage will be set to "Too Long. Bad format." by default.</dd>
<dt>errorMessage: generally object mapping string to string. But see errorMessage.typeMismatch.</dt>
<dd>ErrorMessage maps the keys of the <a href="http://www.w3.org/TR/html5/association-of-controls-and-forms.html#dom-cva-validity">validity</a> object to error messages. By default, errorMessage = <pre>{
valueMissing: "Required.",
patternMismatch: 'Bad format.',
rangeOverflow: 'Too big.',
rangeUnderflow: 'Too small.',
stepMismatch: 'Step mismatch.',
tooLong: 'Too long.',
tooShort: 'Too short.',
typeMismatch: { . . . }
}</pre>
</dd>
<dt>errorMessage.typeMismatch: object mapping string to string.</dt>
<dd>errorMessage.typeMismatch maps an element's type to an error message. By default errormessage.typeMismatch = <pre>{
default: 'Type mismatch.',
email: 'Not a recognized email.',
url: 'Not a recognized url.',
number: 'Not a recognized number.',
date: 'Not a recognized date.',
time: 'Not a recognized time.',
datetime: 'Not a recognized datetime.',
datetimelocal: 'Not a recognized local datetime.',
week: 'Not a recognized week.',
month: 'Not a recognized month.',
visa: 'Not a valid Visa number.',
mastercard: 'Not a valid Mastercard number.',
creditcard: 'Not a valid credit card number.'
}</pre>
</dd>
<dt>typeCheck: object mapping string to function(valueString){ . . .}</dt>
<dd>TypeCheck holds the functions used to verify an input element's type. By default, typeCheck = <pre>
default: function (v){return true;},
email: function (v){
var email_regex = . . .
return email_regex.test(v);
},
url: function(v){
url_regex: . . .
return url_regex.test(v);
},
number: function(x){return !isNaN(x);},
date: function(x){return !isNaN(Date.parse(x));},
time: Date.setISO8601,
datetime: Date.setISO8601,
datetimelocal: Date.setISO8601,
week: Date.setISO8601,
month: Date.setISO8601,
creditcard: function (v) {return creditcard(v);}
}</pre> (But see the source for the most recent value. This documentation may not be updated.)
</dd>
<dt>toType: object mapping string to function(v) { . . . }</dt>
<dd>The object toType holds the function used to convert a string to a value. By default, toType = <pre> {
default: function (v){return v;},
number: function(x){return parseFloat(x);},
date: Date.parse,
time: Date.setISO8601,
datetime: Date.parse,
datetimelocal: Date.parse,
week: Date.setISO8601,
month: Date.setISO8601
}</pre>
</dd>
<dt>stepCheck: object mapping string to function(v, min, step, max)</dt>
<dd>Returns a value which tests true if there is a step error. By default, stepCheck = <pre>{
default: function (v, min, step, max){
step = parseFloat(step);
return ((min != undefined)? ((min + v) % step == 0): (max != undefined)? ((max - v) % step == 0): v % step == 0)? '': 'Value is out of step.';
},
number: function (v, min, step, max){
step = parseFloat(step);
return (min != undefined)? (((min + v) % step == 0)? '': ('Value needs to be a whole multiple of '+step+' from a minimum of '+min+'.')):
(max != undefined)? (((max - v) % step == 0)? '': ('Value needs to be a whole multiple of '+step+' from a maximum of '+max+'.')):
(v % step == 0)? '': ('Value needs to be a multiple of '+step+'.');
},
date: stepCheckDate,
time: stepCheckDate,
datetime: stepCheckDate,
datetimelocal: stepCheckDate,
week: function (v, min, step, max){
step = parseFloat(x) * 604800000;
var base = min!=undefined? min: max!=undefined? max: 1;
base = base.getTime? base.getTime(): parseFloat(base);
return (base+v.getTime())%step? 'Value not in correct increment.': '';
},
month: function (v, min, step, max){
step = parseFloat(x);
var base = min!=undefined? min: max!=undefined? max: 0;
return (base - v).getMonth()%step? 'Value not in correct increment.': '';
}
}</pre>
</dd>
</dl>
</p>
</article>
<article>
<h1>checkvalidity(methodname[, . . .]) <span class="returns">Returns: <a href="http://docs.jquery.com/Types#jQuery">jQuery</a></span></h1>
<p>
Checkvalidity may be called with a method name. The following method names are available: 'init', 'validate', 'reset', and 'destroy'.
</p>
</article>
<article>
<h1>checkvalidity('validate') <span class="returns">Returns: <a href="http://docs.jquery.com/Types#jQuery">jQuery</a></span></h1>
<p>
The validate method validates the elements in the jQuery object. This will result in the triggering of 'valid' or 'invalid' events.
</p>
</article>
<article>
<h1>checkvalidity(reset, [handler]) <span class="returns">Returns: <a href="http://docs.jquery.com/Types#jQuery">jQuery</a></span></h1>
<p>
Called without the handler argument, the reset method calls the reset callback on the objects in the jQuery object. Called with a handler, the reset method assigns the reset callback of the elements in the jQuery object.
</p>
</article>
</body>
</html>