Skip to content
This repository was archived by the owner on Jul 3, 2024. It is now read-only.

Commit 85e3e8f

Browse files
aarongustafsonaarongustafson
committed
Initial checkin
1 parent 125cce7 commit 85e3e8f

File tree

3 files changed

+222
-1
lines changed

3 files changed

+222
-1
lines changed

‎README.md

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,29 @@
11
jquery.easy-validation.js
22
=========================
33

4-
A simple polyfill for HTML5 based validation
4+
A simple polyfill for HTML5 based validation
5+
6+
The API
7+
-------
8+
9+
Our validation strategy involves using an HTML5-aware browser’s built-in
10+
validation mechanism, falling back to a JavaScript-based validation scheme
11+
in non HTML5-aware browsers, and finally degrading to server-side validation
12+
in non-JavaScript scenarios. HTML5 supports field validation using a few
13+
mechanisms, two of which we commonly use:
14+
15+
- The `required` attribute indicates a field is required
16+
- The `pattern` attribute allows you to indicate a regular expression for matching
17+
against the supplied content
18+
19+
Using a few custom `data-*` attributes, you can tailor the error messages
20+
provided to users via browser or JavaScript based validation for forms as a
21+
whole or individual fields:
22+
23+
- The `data-validation-error-empty` attribute
24+
When used on a form, it prescribes a global default message for all fields
25+
that are invalid when empty; when used on a field, it provides a field-specific
26+
error message when empty.
27+
- The `data-validaiton-error-invalid`` attribute
28+
When used on a form, it prescribes a global default message for all fields that
29+
are invalid; when used on a field, it provides a field-specific error message when invalid.

‎min/jquery.easy-validation.min.js

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/jquery.easy-validation.js

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
/*! Easy Validation (c) Aaron Gustafson (@AaronGustafson). MIT License. http://github.com/easy-designs/jquery.easy-validation.js */
2+
3+
/* Easy Validation API
4+
*
5+
* Our validation strategy involves using an HTML5-aware browser’s built-in
6+
* validation mechanism, falling back to a JavaScript-based validation scheme
7+
* in non HTML5-aware browsers, and finally degrading to server-side validation
8+
* in non-JavaScript scenarios. HTML5 supports field validation using a few
9+
* mechanisms, two of which we commonly use:
10+
*
11+
* - The required attribute indicates a field is required
12+
* - The pattern attribute allows you to indicate a regular expression for matching
13+
* against the supplied content
14+
*
15+
* Using a few custom data-* attributes, you can tailor the error messages
16+
* provided to users via browser or JavaScript based validation for forms as a
17+
* whole or individual fields:
18+
*
19+
* - The data-validation-error-empty attribute
20+
* When used on a form, it prescribes a global default message for all fields
21+
* that are invalid when empty; when used on a field, it provides a field-specific
22+
* error message when empty.
23+
* - The data-validaiton-error-invalid attribute
24+
* When used on a form, it prescribes a global default message for all fields that
25+
* are invalid; when used on a field, it provides a field-specific error message when invalid.
26+
*
27+
**/
28+
29+
(function( $, document, UA ){
30+
31+
var FALSE = false,
32+
TRUE = true,
33+
$forms = $('form'),
34+
ERROR = 'validation-error',
35+
EMPTY = ERROR + '-empty',
36+
INVALID = ERROR + '-invalid',
37+
DEFAULT_EMPTY_MSG = 'This field cannot be left blank',
38+
DEFAULT_INVALID_MSG = 'This field is not properly formatted',
39+
container = 'form > ol > li, .form-item',
40+
41+
// borrowed from Modernizr
42+
html5_validation = (function( props ){
43+
var supported = {},
44+
input = document.createElement('input');
45+
46+
$.each( props, function( i, prop ){
47+
if ( ! ( 'hasOwnProperty' in input && input.hasOwnProperty( prop ) ) )
48+
{
49+
return FALSE;
50+
}
51+
else
52+
{
53+
supported[prop] = TRUE;
54+
}
55+
});
56+
57+
// Android & Safari (inc iOS) have a tendency to lie
58+
// for now this is the best we can do
59+
if ( supported.pattern && supported.required &&
60+
( UA.indexOf('android') != -1 || ( UA.indexOf('applewebkit') != -1 && UA.indexOf('chrome') == -1 ) ) )
61+
{
62+
return FALSE;
63+
}
64+
65+
return TRUE;
66+
67+
})('max min pattern required step'.split(' '));
68+
69+
// Validation algorithm
70+
$.fn.validate = function(){
71+
72+
// Patterns on loan from h5 Validate (https://github.com/dilvie/h5Validate)
73+
// not using them yet though
74+
var patterns = {
75+
tel: /([\+][0-9]{1,3}([ \.\-])?)?([\(]{1}[0-9]{3}[\)])?([0-9A-Z \.\-]{1,32})((x|ext|extension)?[0-9]{1,4}?)/,
76+
email: /((([a-zA-Z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-zA-Z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?/,
77+
url: /(https?|ftp):\/\/(((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?/,
78+
number: /-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d+)?/,
79+
dateISO: /\d{4}[\/\-]\d{1,2}[\/\-]\d{1,2}/,
80+
alpha: /[a-zA-Z]+/,
81+
alphaNumeric: /\w+/,
82+
integer: /-?\d+/
83+
};
84+
85+
$(this).on( 'submit', function( evt ){
86+
87+
var $form = $(this),
88+
$error = $('<strong class="error-message"/>'),
89+
empty = $form.data(EMPTY) || DEFAULT_EMPTY_MSG,
90+
invalid = $form.data(INVALID) || DEFAULT_INVALID_MSG,
91+
error = FALSE; // optimism
92+
93+
$form
94+
// cleanup
95+
.find( '.' + ERROR )
96+
.children('strong.error-message')
97+
.remove()
98+
.end()
99+
.removeClass( ERROR )
100+
.end()
101+
// validation
102+
.find('input,select,textarea')
103+
.each(function(){
104+
var $field = $(this),
105+
$container = $field.closest( container ),
106+
val = $field.val(),
107+
r, e;
108+
109+
if ( $field.is('[required]') && val == '' )
110+
{
111+
e = $field.data( EMPTY ) || empty;
112+
$error
113+
.clone()
114+
.text(e)
115+
.appendTo(
116+
$container.addClass( ERROR )
117+
);
118+
error = TRUE;
119+
}
120+
// not required or not empty
121+
else
122+
{
123+
if ( $field.is('[pattern]') )
124+
{
125+
r = new RegExp( $field.attr('pattern') );
126+
e = $field.data(INVALID) || invalid;
127+
if ( ! val.match( r ) )
128+
{
129+
$error
130+
.clone()
131+
.text(e)
132+
.appendTo(
133+
$container.addClass( ERROR )
134+
);
135+
error = TRUE;
136+
}
137+
}
138+
}
139+
});
140+
return ! error;
141+
});
142+
143+
return this;
144+
};
145+
146+
if ( $forms.length )
147+
{
148+
if ( html5_validation )
149+
{
150+
// custom error messaging
151+
$( 'input,select,textarea' )
152+
// handle invalidity
153+
.on( 'invalid', function(){
154+
155+
var $field = $(this),
156+
$form = $field.closest('form'),
157+
empty = $form.data(EMPTY) || DEFAULT_EMPTY_MSG,
158+
invalid = $form.data(INVALID) || DEFAULT_INVALID_MSG,
159+
msg = '';
160+
161+
if ( this.validity.valueMissing )
162+
{
163+
msg = $field.data( EMPTY ) || empty;
164+
}
165+
else if ( ! this.validity.valid )
166+
{
167+
msg = $field.data( INVALID ) || invalid;
168+
}
169+
170+
$field.closest( container )
171+
.addClass( ERROR );
172+
173+
this.setCustomValidity( msg );
174+
175+
})
176+
// reset
177+
.on( 'change', function(){
178+
179+
$(this).closest( container )
180+
.removeClass( ERROR );
181+
182+
this.setCustomValidity('');
183+
184+
});
185+
}
186+
else
187+
{
188+
//console.log('no html5 :-(');
189+
$forms.validate();
190+
}
191+
}
192+
193+
194+
})( jQuery, document, navigator.userAgent.toLowerCase() );

0 commit comments

Comments
 (0)