9 var validator = (
function($){
10 var message, tests, checkField, validate, mark, unmark, field, minmax, defaults,
11 validateWords, lengthRange, lengthLimit, pattern, alertTxt, data,
12 email_illegalChars = /[\(\)\<\>\,\;\:\\\/\
"\[\]]/,
15 /* general text messages
18 invalid : 'invalid input',
19 checked : 'must be checked',
20 empty : 'please put something here',
21 min : 'input is too short',
22 max : 'input is too long',
23 number_min : 'too low',
24 number_max : 'too high',
26 number : 'not a number',
27 email : 'email address is invalid',
28 email_repeat : 'emails do not match',
29 password_repeat : 'passwords do not match',
31 complete : 'input is not complete',
32 select : 'Please select an option'
37 console.log=console.warn=function(){ return; }
50 /* Tests for each type of field (including Select element)
53 sameAsPlaceholder : function(a){
54 return $.fn.placeholder && a.attr('placeholder') !== undefined && data.val == a.prop('placeholder');
56 hasValue : function(a){
58 alertTxt = message.empty;
63 // 'linked' is a special test case for inputs which their values should be equal to each other (ex. confirm email or retype password)
64 linked : function(a,b){
66 // choose a specific message or a general one
67 alertTxt = message[data.type + '_repeat'] || message.no_match;
73 if ( !email_filter.test( a ) || a.match( email_illegalChars ) ){
74 alertTxt = a ? message.email : message.empty;
79 // a "skip
" will skip some of the tests (needed for keydown validation)
80 text : function(a, skip){
81 // make sure there are at least X number of words, each at least 2 chars long.
82 // for example 'john F kenedy' should be at least 2 words and will pass validation
84 var words = a.split(' ');
85 // iterrate on all the words
86 var wordsLength = function(len){
87 for( var w = words.length; w--; )
88 if( words[w].length < len )
93 if( words.length < validateWords || !wordsLength(2) ){
94 alertTxt = message.complete;
99 if( !skip && lengthRange && a.length < lengthRange[0] ){
100 alertTxt = message.min;
104 // check if there is max length & field length is greater than the allowed
105 if( lengthRange && lengthRange[1] && a.length > lengthRange[1] ){
106 alertTxt = message.max;
110 // check if the field's value should obey any length limits, and if so, make sure the length of the value is as specified
111 if( lengthLimit && lengthLimit.length ){
112 while( lengthLimit.length ){
113 if( lengthLimit.pop() == a.length ){
114 alertTxt = message.complete;
123 case 'alphanumeric' :
124 regex = /^[a-zA-Z0-9]+$/i;
130 regex = /^\+?([0-9]|[-|' '])+$/i;
136 jsRegex = new RegExp(regex).test(a);
141 console.log(err, field, 'regex is invalid');
148 number : function(a){
149 // if not not a number
150 if( isNaN(parseFloat(a)) && !isFinite(a) ){
151 alertTxt = message.number;
154 // not enough numbers
155 else if( lengthRange && a.length < lengthRange[0] ){
156 alertTxt = message.min;
159 // check if there is max length & field length is greater than the allowed
160 else if( lengthRange && lengthRange[1] && a.length > lengthRange[1] ){
161 alertTxt = message.max;
164 else if( minmax[0] && (a|0) < minmax[0] ){
165 alertTxt = message.number_min;
168 else if( minmax[1] && (a|0) > minmax[1] ){
169 alertTxt = message.number_max;
174 // Date is validated in European format (day,month,year)
176 var day, A = a.split(/[-./]/g), i;
177 // if there is native HTML5 support:
178 if( field[0].valueAsNumber )
181 for( i = A.length; i--; ){
182 if( isNaN(parseFloat(a)) && !isFinite(a) )
186 day = new Date(A[2], A[1]-1, A[0]);
187 if( day.getMonth()+1 == A[1] && day.getDate() == A[0] )
192 console.log('date test: ', err);
197 // minimalistic URL validation
198 function testUrl(url){
199 return /^(https?:\/\/)?([\w\d\-_]+\.+[A-Za-z]{2,})+\/?/.test( url );
202 alertTxt = a ? message.url : message.empty;
207 hidden : function(a){
208 if( lengthRange && a.length < lengthRange[0] ){
209 alertTxt = message.min;
214 if( pattern == 'alphanumeric' ){
215 regex = /^[a-z0-9]+$/i;
216 if( !regex.test(a) ){
223 select : function(a){
224 if( !tests.hasValue(a) ){
225 alertTxt = message.select;
232 /* marks invalid fields
234 mark = function( field, text ){
235 if( !text || !field || !field.length )
238 // check if not already marked as a 'bad' record and add the 'alert' object.
239 // if already is marked as 'bad', then make sure the text is set again because i might change depending on validation
240 var item = field.closest('.' + defaults.classes.item),
243 if( item.hasClass(defaults.classes.bad) ){
244 if( defaults.alerts )
245 item.find('.'+defaults.classes.alert).html(text);
249 else if( defaults.alerts ){
250 warning = $('<div class="'+ defaults.classes.alert +'">').html( text );
251 item.append( warning );
254 item.removeClass(defaults.classes.bad);
255 // a delay so the "alert
" could be transitioned via CSS
256 setTimeout(function(){
257 item.addClass(defaults.classes.bad);
260 /* un-marks invalid fields
262 unmark = function( field ){
263 if( !field || !field.length ){
264 console.warn('no "field
" argument, null or DOM object not found');
268 field.closest('.' + defaults.classes.item)
269 .removeClass(defaults.classes.bad)
270 .find('.'+ defaults.classes.alert).remove();
273 function testByType(type, value){
275 pattern = pattern || 'phone';
277 if( !type || type == 'password' || type == 'tel' || type == 'search' || type == 'file' )
281 return tests[type] ? tests[type](value, true) : true;
284 function prepareFieldData(el){
287 field.data( 'valid', true ); // initialize validity of field
288 field.data( 'type', field.attr('type') ); // every field starts as 'valid=true' until proven otherwise
289 pattern = field.attr('pattern');
292 /* Validations per-character keypress
294 function keypress(e){
295 prepareFieldData(this);
296 // String.fromCharCode(e.charCode)
299 return testByType( this.type, this.value );
303 /* Checks a single form field by it's type and specific (custom) attributes
305 function checkField(){
306 // skip testing fields whom their type is not HIDDEN but they are HIDDEN via CSS.
307 if( this.type !='hidden' && $(this).is(':hidden') )
310 prepareFieldData(this);
312 field.data( 'val', field[0].value.replace(/^\s+|\s+$/g, "") ); // cache the value of the field and trim it
315 // Check if there is a specific error message for that field, if not, use the default 'invalid' message
316 alertTxt = message[field.prop('name')] || message.invalid;
319 if( field[0].nodeName.toLowerCase() === "select
" ){
320 data.type = 'select';
322 else if( field[0].nodeName.toLowerCase() === "textarea
" ){
325 /* Gather Custom data attributes for specific validation:
327 validateWords = data['validateWords'] || 0;
328 lengthRange = data['validateLengthRange'] ? (data['validateLengthRange']+'').split(',') : [1];
329 lengthLimit = data['validateLength'] ? (data['validateLength']+'').split(',') : false;
330 minmax = data['validateMinmax'] ? (data['validateMinmax']+'').split(',') : ''; // for type 'number', defines the minimum and/or maximum for the value as a number.
332 data.valid = tests.hasValue(data.val);
334 if( field.hasClass('optional') && !data.valid )
339 if( field[0].type === "checkbox
" ){
340 data.valid = field[0].checked;
341 alertTxt = message.checked;
344 // check if field has any value
345 else if( data.valid ){
346 /* Validate the field's value is different than the placeholder attribute (and attribute exists)
347 * this is needed when fixing the placeholders for older browsers which does not support them.
348 * in this case, make sure the "placeholder
" jQuery plugin was even used before proceeding
350 if( tests.sameAsPlaceholder(field) ){
351 alertTxt = message.empty;
355 // if this field is linked to another field (their values should be the same)
356 if( data.validateLinked ){
357 var linkedTo = data['validateLinked'].indexOf('#') == 0 ? $(data['validateLinked']) : $(':input[name=' + data['validateLinked'] + ']');
358 data.valid = tests.linked( data.val, linkedTo.val() );
360 /* validate by type of field. use 'attr()' is proffered to get the actual value and not what the browsers sees for unsupported types.
362 else if( data.valid || data.type == 'select' )
363 data.valid = testByType(data.type, data.val);
367 // mark / unmark the field, and set the general 'submit' flag accordingly
371 mark( field, alertTxt );
378 /* vaildates all the REQUIRED fields prior to submiting the form
380 function checkAll( $form ){
383 if( $form.length == 0 ){
384 console.warn('element not found');
389 submit = true, // save the scope
390 // get all the input/textareas/select fields which are required or optional (meaning, they need validation only if they were filled)
391 fieldsToCheck = $form.find(':input').filter('[required=required], .required, .optional').not('[disabled=disabled]');
393 fieldsToCheck.each(function(){
394 // use an AND operation, so if any of the fields returns 'false' then the submitted result will be also FALSE
395 submit = submit * checkField.apply(this);
398 return !!submit; // casting the variable to make sure it's a boolean
403 checkField : checkField,