@@ -0,0 +1,117 @@
'use strict';
var sr = {};
sr.Validator = function(){
this.errors = [];
this.messages = {
required: 'The :input: is required',
email: 'The :input: is not a valid email address',
mobile: 'The :input: is not a valid mobile number',
hex: 'The :input: is not a valid hex code',
min: 'The min value of :input: is :num:',
max: 'The max value of :input: is :num:'
};
this.initialize = function(){
this.els = document.getElementsByClassName('validate');
};
this.call = function(){
this.setRules();
this.showErrors();
};
this.setError = function(el, message, num){
el.className += ' error';
var msg = message.replace(':input:', el.getAttribute('name'));
return msg.replace(':num:', num);
};
this.setRules = function(){
for (var i = 0; i < this.els.length; i++) {
this.els[i].className = 'validate';
var rules = this.els[i].getAttribute('data-validate').split('|');
this.validate(this.els[i], rules);
}
};
this.validate = function(el, rules){
for (var i = 0; i < rules.length; i++) {
if (rules[i].indexOf(':') !== -1) {
var limit = rules[i].split(':');
this[limit[0]](el, limit[1]);
} else {
this[rules[i]](el);
}
}
};
this.showErrors = function(){
if(this.errors.length > 0){
var err = document.getElementById('errors');
err.innerHTML = null;
for (var i = 0; i < this.errors.length; i++) {
err.innerHTML += '<li>' + this.errors[i] + '</li>';
}
this.errors = [];
event.preventDefault();
}
};
/*-----------------------------------
| Validation Rules
------------------------------------*/
this.required = function(el){
if(el.value.length === 0){
this.errors.push(this.setError(el, this.messages.required));
}
};
this.email = function(el){
var rule = /^[\w-.+]+?@.+\.[a-z]{2,4}$/i;
if(!rule.test(el.value)){
this.errors.push(this.setError(el, this.messages.email));
}
};
this.mobile = function(el){
var rule = /^(\+)?[\d]{11,12}$/;
if (!rule.test(el.value)) {
this.errors.push(this.setError(el, this.messages.mobile));
}
};
this.hex = function(el){
var rule = /^#?(([a-fA-F0-9]){3}){1,2}$/;
if (!rule.test(el.value)) {
this.errors.push(this.setError(el, this.messages.hex));
}
};
this.min = function(el, num){
if(el.value < num){
this.errors.push(this.setError(el, this.messages.min, num));
}
};
this.max = function(el, num){
if(el.value > num){
this.errors.push(this.setError(el, this.messages.max, num));
}
};
this.initialize();
};
(function(){
window.v = new sr.Validator();
document.getElementById('form').addEventListener('submit', function() {
window.v.call();
}, false);
})();
steve228uk renamed this gist