Mini Kabibi Habibi
/*
Validator v3.3.1
(c) Yair Even Or
https://github.com/yairEO/validator
*/
;(function(root, factory){
var define = define || {};
if( typeof define === 'function' && define.amd )
define([], factory);
else if( typeof exports === 'object' && typeof module === 'object' )
module.exports = factory();
else if(typeof exports === 'object')
exports["FormValidator"] = factory();
else
root.FormValidator = factory();
}(this, function(){
function FormValidator( settings, formElm ){
this.data = {}; // holds the form fields' data
this.DOM = {
scope : formElm
};
this.settings = this.extend({}, this.defaults, settings || {});
this.texts = this.extend({}, this.texts, this.settings.texts || {});
this.settings.events && this.events();
}
FormValidator.prototype = {
// Validation error texts
texts : {
invalid : 'inupt is not as expected',
short : 'input is too short',
long : 'input is too long',
checked : 'must be checked',
empty : 'please put something here',
select : 'Please select an option',
number_min : 'too low',
number_max : 'too high',
url : 'invalid URL',
number : 'not a number',
email : 'email address is invalid',
email_repeat : 'emails do not match',
date : 'invalid date',
time : 'invalid time',
password_repeat : 'passwords do not match',
no_match : 'no match',
complete : 'input is not complete'
},
// default settings
defaults : {
alerts : true,
events : false,
regex : {
url : /^(https?:\/\/)?([\w\d\-_]+\.+[A-Za-z]{2,})+\/?/,
phone : /^\+?([0-9]|[-|' '])+$/i,
numeric : /^[0-9]+$/i,
alphanumeric : /^[a-zA-Z0-9]+$/i,
email : {
illegalChars : /[\(\)\<\>\,\;\:\\\/\"\[\]]/,
filter : /^.+@.+\..{2,6}$/ // exmaple email "steve@s-i.photo"
}
},
classes : {
item : 'field',
alert : 'alert',
bad : 'bad'
}
},
// Tests (per type)
// each test return "true" when passes and a string of error text otherwise
tests : {
sameAsPlaceholder : function( field, data ){
if( field.getAttribute('placeholder') )
return data.value != field.getAttribute('placeholder') || this.texts.empty;
else
return true;
},
hasValue : function( value ){
return value ? true : this.texts.empty;
},
// 'linked' is a special test case for inputs which their values should be equal to each other (ex. confirm email or retype password)
linked : function(a, b, type){
if( b != a ){
// choose a specific message or a general one
return this.texts[type + '_repeat'] || this.texts.no_match;
}
return true;
},
email : function(field, data){
if ( !this.settings.regex.email.filter.test( data.value ) || data.value.match( this.settings.regex.email.illegalChars ) ){
return this.texts.email;
}
return true;
},
// a "skip" will skip some of the tests (needed for keydown validation)
text : function(field, data){
var that = this;
// make sure there are at least X number of words, each at least 2 chars long.
// for example 'john F kenedy' should be at least 2 words and will pass validation
if( data.validateWords ){
var words = data.value.split(' ');
// iterate on all the words
var wordsLength = function(len){
for( var w = words.length; w--; )
if( words[w].length < len )
return that.texts.short;
return true;
};
if( words.length < data.validateWords || !wordsLength(2) )
return this.texts.complete;
return true;
}
if( data.lengthRange && data.value.length < data.lengthRange[0] ){
return this.texts.short;
}
// check if there is max length & field length is greater than the allowed
if( data.lengthRange && data.lengthRange[1] && data.value.length > data.lengthRange[1] ){
return this.texts.long;
}
// check if the field's value should obey any length limits, and if so, make sure the length of the value is as specified
if( data.lengthLimit && data.lengthLimit.length ){
while( data.lengthLimit.length ){
if( data.lengthLimit.pop() == data.value.length ){
return true;
}
}
return this.texts.complete;
}
if( data.pattern ){
var regex, jsRegex;
switch( data.pattern ){
case 'alphanumeric' :
regex = this.settings.regex.alphanumeric
break;
case 'numeric' :
regex = this.settings.regex.numeric
break;
case 'phone' :
regex = this.settings.regex.phone
break;
default :
regex = data.pattern;
}
try{
jsRegex = new RegExp(regex).test(data.value);
if( data.value && !jsRegex ){
return this.texts.invalid;
}
}
catch(err){
console.warn(err, field, 'regex is invalid');
return this.texts.invalid;
}
}
return true;
},
number : function( field, data ){
var a = data.value;
// if not not a number
if( isNaN(parseFloat(a)) && !isFinite(a) ){
return this.texts.number;
}
// not enough numbers
else if( data.lengthRange && a.length < data.lengthRange[0] ){
return this.texts.short;
}
// check if there is max length & field length is greater than the allowed
else if( data.lengthRange && data.lengthRange[1] && a.length > data.lengthRange[1] ){
return this.texts.long;
}
else if( data.minmax[0] && (a|0) < data.minmax[0] ){
return this.texts.number_min;
}
else if( data.minmax[1] && (a|0) > data.minmax[1] ){
return this.texts.number_max;
}
return true;
},
// Date is validated in European format (day,month,year)
date : function( field, data ){
var day, A = data.value.split(/[-./]/g), i;
// if there is native HTML5 support:
if( field.valueAsNumber )
return true;
for( i = A.length; i--; ){
if( isNaN(parseFloat( data.value )) && !isFinite(data.value) )
return this.texts.date;
}
try{
day = new Date(A[2], A[1]-1, A[0]);
if( day.getMonth()+1 == A[1] && day.getDate() == A[0] )
return true;
return this.texts.date;
}
catch(er){
return this.texts.date;
}
},
time : function( field, data ){
var pattern = /^([0-1][0-9]|2[0-3]):[0-5][0-9]$/;
if( pattern.test(data.value) )
return true;
else
return this.texts.time;
},
url : function( field, data ){
// minimalistic URL validation
if( !this.settings.regex.url.test(data.value) )
return this.texts.url;
return true;
},
hidden : function( field, data ){
if( data.lengthRange && data.value.length < data.lengthRange[0] )
return this.texts.short;
if( data.pattern ){
if( data.pattern == 'alphanumeric' && !this.settings.regex.alphanumeric.test(data.value) )
return this.texts.invalid;
}
return true;
},
select : function( field, data ){
return data.value ? true : this.texts.select;
},
checkbox : function( field, data ){
if( field.checked ) return true;
return this.texts.checked;
}
},
/**
* bind events on form elements
* @param {Array/String} types [description]
* @param {Object} formElm [optional - form element, if one is not already defined on the instance]
* @return {[type]} [description]
*/
events : function( types, formElm ){
var that = this;
types = types || this.settings.events;
formElm = formElm || this.DOM.scope;
if( !formElm || !types ) return;
if( types instanceof Array )
types.forEach(bindEventByType);
else if( typeof types == 'string' )
bindEventByType(types)
function bindEventByType( type ){
formElm.addEventListener(type, function(e){
that.checkField(e.target)
}, true);
}
},
/**
* Marks an field as invalid
* @param {DOM Object} field
* @param {String} text
* @return {String} - useless string (should be the DOM node added for warning)
*/
mark : function( field, text ){
if( !text || !field )
return false;
var that = this;
// check if not already marked as 'bad' and add the 'alert' object.
// if already is marked as 'bad', then make sure the text is set again because i might change depending on validation
var item = this.closest(field, '.' + this.settings.classes.item),
alert = item.querySelector('.'+this.settings.classes.alert),
warning;
if( this.settings.alerts ){
if( alert )
alert.innerHTML = text;
else{
warning = '<div class="'+ this.settings.classes.alert +'">' + text + '</div>';
item.insertAdjacentHTML('beforeend', warning);
}
}
item.classList.remove(this.settings.classes.bad);
// a delay so the "alert" could be transitioned via CSS
setTimeout(function(){
item.classList.add( that.settings.classes.bad );
});
return warning;
},
/* un-marks invalid fields
*/
unmark : function( field ){
var warning;
if( !field ){
console.warn('no "field" argument, null or DOM object not found');
return false;
}
var fieldWrap = this.closest(field, '.' + this.settings.classes.item);
if( fieldWrap ){
warning = fieldWrap.querySelector('.'+ this.settings.classes.alert);
fieldWrap.classList.remove(this.settings.classes.bad);
}
if( warning )
warning.parentNode.removeChild(warning);
},
/**
* removes unmarks all fields
* @return {[type]} [description]
*/
reset : function( formElm ){
var fieldsToCheck,
that = this;
formElm = formElm || this.DOM.scope;
fieldsToCheck = this.filterFormElements( formElm.elements );
fieldsToCheck.forEach(function(elm){
that.unmark(elm);
});
},
/**
* Normalize types if needed & return the results of the test (per field)
* @param {String} type [form field type]
* @param {*} value
* @return {Boolean} - validation test result
*/
testByType : function( field, data ){
data = this.extend({}, data); // clone the data
var type = data.type;
if( type == 'tel' )
data.pattern = data.pattern || 'phone';
if( !type || type == 'password' || type == 'tel' || type == 'search' || type == 'file' )
type = 'text';
return this.tests[type] ? this.tests[type].call(this, field, data) : true;
},
prepareFieldData : function( field ){
var nodeName = field.nodeName.toLowerCase(),
id = Math.random().toString(36).substr(2,9);
field["_validatorId"] = id;
this.data[id] = {};
this.data[id].value = field.value.replace(/^\s+|\s+$/g, ""); // cache the value of the field and trim it
this.data[id].valid = true; // initialize validity of field
this.data[id].type = field.getAttribute('type'); // every field starts as 'valid=true' until proven otherwise
this.data[id].pattern = field.getAttribute('pattern');
// Special treatment
if( nodeName === "select" )
this.data[id].type = "select";
else if( nodeName === "textarea" )
this.data[id].type = "text";
/* Gather Custom data attributes for specific validation:
*/
this.data[id].validateWords = field.getAttribute('data-validate-words') || 0;
this.data[id].lengthRange = field.getAttribute('data-validate-length-range') ? (field.getAttribute('data-validate-length-range')+'').split(',') : [1];
this.data[id].lengthLimit = field.getAttribute('data-validate-length') ? (field.getAttribute('data-validate-length')+'').split(',') : false;
this.data[id].minmax = field.getAttribute('data-validate-minmax') ? (field.getAttribute('data-validate-minmax')+'').split(',') : false; // for type 'number', defines the minimum and/or maximum for the value as a number.
this.data[id].validateLinked = field.getAttribute('data-validate-linked');
return this.data[id];
},
/**
* Find the closeset element, by selector
* @param {Object} el [DOM node]
* @param {String} selector [CSS-valid selector]
* @return {Object} [Found element or null if not found]
*/
closest : function(el, selector){
var matchesFn;
// find vendor prefix
['matches','webkitMatchesSelector','mozMatchesSelector','msMatchesSelector','oMatchesSelector'].some(function(fn){
if( typeof document.body[fn] == 'function' ){
matchesFn = fn;
return true;
}
return false;
})
var parent;
// traverse parents
while (el) {
parent = el.parentElement;
if (parent && parent[matchesFn](selector)) {
return parent;
}
el = parent;
}
return null;
},
/**
* MDN polyfill for Object.assign
*/
extend : function( target, varArgs ){
if( !target )
throw new TypeError('Cannot convert undefined or null to object');
var to = Object(target),
nextKey, nextSource, index;
for( index = 1; index < arguments.length; index++ ){
nextSource = arguments[index];
if( nextSource != null ) // Skip over if undefined or null
for( nextKey in nextSource )
// Avoid bugs when hasOwnProperty is shadowed
if( Object.prototype.hasOwnProperty.call(nextSource, nextKey) )
to[nextKey] = nextSource[nextKey];
}
return to;
},
/* Checks a single form field by it's type and specific (custom) attributes
* {DOM Object} - the field to be checked
* {Boolean} silent - don't mark a field and only return if it passed the validation or not
*/
checkField : function( field, silent ){
// skip testing fields whom their type is not HIDDEN but they are HIDDEN via CSS.
if( field.type !='hidden' && !field.clientWidth )
return { valid:true, error:"" }
field = this.filterFormElements( [field] )[0];
// if field did not pass filtering or is simply not passed
if( !field )
return { valid:true, error:"" }
// this.unmark( field );
var linkedTo,
testResult,
optional = field.className.indexOf('optional') != -1,
data = this.prepareFieldData( field ),
form = this.closest(field, 'form'); // if the field is part of a form, then cache it
// check if field has any value
/* Validate the field's value is different than the placeholder attribute (and attribute exists)
* this is needed when fixing the placeholders for older browsers which does not support them.
*/
// first, check if the field even has any value
testResult = this.tests.hasValue.call(this, data.value);
// if the field has value, check if that value is same as placeholder
if( testResult === true )
testResult = this.tests.sameAsPlaceholder.call(this, field, data );
data.valid = optional || testResult === true;
if( optional && !data.value ){
return { valid:true, error:"" }
}
if( testResult !== true )
data.valid = false;
// validate by type of field. use 'attr()' is proffered to get the actual value and not what the browsers sees for unsupported types.
if( data.valid ){
testResult = this.testByType(field, data);
data.valid = testResult === true ? true : false;
}
// if this field is linked to another field (their values should be the same)
if( data.valid && data.validateLinked ){
if( data['validateLinked'].indexOf('#') == 0 )
linkedTo = document.body.querySelector(data['validateLinked'])
else if( form.length )
linkedTo = form.querySelector('[name=' + data['validateLinked'] + ']');
else
linkedTo = document.body.querySelector('[name=' + data['validateLinked'] + ']');
testResult = this.tests.linked.call(this, field.value, linkedTo.value, data.type );
data.valid = testResult === true ? true : false;
}
if( !silent )
this[data.valid ? "unmark" : "mark"]( field, testResult ); // mark / unmark the field
return {
valid : data.valid,
error : data.valid === true ? "" : testResult
};
},
/**
* Only allow certain form elements which are actual inputs to be validated
* @param {HTMLCollection} form fields Array [description]
* @return {Array} [description]
*/
filterFormElements : function( fields ){
var i,
fieldsToCheck = [];
for( i = fields.length; i--; ) {
var isAllowedElement = fields[i].nodeName.match(/input|textarea|select/gi),
isRequiredAttirb = fields[i].hasAttribute('required'),
isDisabled = fields[i].hasAttribute('disabled'),
isOptional = fields[i].className.indexOf('optional') != -1;
if( isAllowedElement && (isRequiredAttirb || isOptional) && !isDisabled )
fieldsToCheck.push(fields[i]);
}
return fieldsToCheck;
},
checkAll : function( formElm ){
if( !formElm ){
console.warn('element not found');
return false;
}
var that = this,
result = {
valid : true, // overall form validation flag
fields : [] // array of objects (per form field)
},
fieldsToCheck = this.filterFormElements( formElm.elements );
// get all the input/textareas/select fields which are required or optional (meaning, they need validation only if they were filled)
fieldsToCheck.forEach(function(elm, i){
var fieldData = that.checkField(elm);
// use an AND operation, so if any of the fields returns 'false' then the submitted result will be also FALSE
result.valid = !!(result.valid * fieldData.valid);
result.fields.push({
field : elm,
error : fieldData.error,
valid : !!fieldData.valid
})
});
return result;
}
}
return FormValidator;
}));