function focusIt(el) {
$('input[name="'+el+'"]').focus();
}
$.fn.extend({
validate: function(callback) {
'use strict';
var rules = [];
var params = [];
var field_list = [];
var size = this[0].elements.length - 1;
while (size--) {
field_list.unshift(this[0].elements[size]);
}
var responses = {
required: 'This field is required.',
nospace: 'No white-spaces allowed!',
integer: 'This field must be an integer.',
alpha: 'This field must contain alphabetic characters only.',
alphanum: 'This field must contain alpha-numeric characters only.',
special: 'This field must contain alpha-numeric characters only. Some special characters allowed (_-!@#$%&.,*+).',
real: 'This field must contain a real number.',
pos: 'The value must be positive.',
email: 'This field must contain a valid email address.',
match: "This field must match the required one.",
number: 'This field must contain a number within the required range.',
range: function(min, max, given) { return 'This field must contain a number between ' + min + ' and ' + max + '. ' + given + ' given.'; },
len: function(min, max, given) { return 'This field must contain between ' + min + ' and ' + max + ' characters. ' + given + ' given.'; },
exact_len: function(exact, given) { return 'This field must contain exactly ' + exact + ' characters. ' + given + ' given.'; }
}
// REMOVE WHITE SPACES
String.prototype.remWS = function() {
return this.replace(/ /g, '').trim();
}
// SINGLE WHITE SPACE
String.prototype.oneWS = function() {
return this.replace(/[ ]+/g, ' ').trim();
}
// REMOVE SIGNALS
String.prototype.remSN = function() {
return this.replace(/[\+]/g, '');
}
//----------------------------------
// SET UP RULES
//----------------------------------
var check = {
//----------------------------------
// REQUIRED FIELD (required)
//----------------------------------
required: function(field) {
if (field.value.trim() === '') {
$(field).parent().addClass('text-danger');
$(field).addClass('border-danger');
$(field).val(field.value.remWS());
field.focus();
$(field).next().text(responses.required);
if (callback) callback({success: 0, msg: responses.required});
return false;
}
return true;
},
//----------------------------------
// NO WHITE SPACES ALLOWED (nospace)
//----------------------------------
nospace: function(field) {
console.log('content');
if (/[ ]+/i.test(field.value)) {
$(field).focus();
$(field).parent().addClass('text-danger');
$(field).addClass('border-danger');
$(field).next().text(responses.nospace);
if (callback) callback({success: 0, msg: responses.nospace});
return false;
}
return true;
},
//----------------------------------
// ALPHA-CHARACTERS ONLY (alpha)
//----------------------------------
alpha: function(field) {
if (/[^\n a-zãõñâêîôûáéíóúàèìòùäëïöüç]/i.test(field.value)) {
$(field).focus();
$(field).parent().addClass('text-danger');
$(field).addClass('border-danger');
$(field).next().text(responses.alpha);
if (callback) callback({success: 0, msg: responses.alpha});
return false;
}
return true;
},
//----------------------------------
// ALPHA-NUMERIC ONLY (alphanum)
//----------------------------------
alphanum: function(field) {
if (/[^\n a-z0-9ãõñâêîôûáéíóúàèìòùäëïöüç]/i.test(field.value)) {
$(field).focus();
$(field).parent().addClass('text-danger');
$(field).addClass('border-danger');
$(field).next().text(responses.alphanum);
if (callback) callback({success: 0, msg: responses.alphanum});
return false;
}
return true;
},
//----------------------------------
// SPECIAL & ALPHA-NUMERIC (special)
//----------------------------------
special: function(field) {
if (/[^\n 0-9a-zãõñâêîôûáéíóúàèìòùäëïöüç_\-!?@#$%&.,*+]+/i.test(field.value)) {
$(field).focus();
$(field).parent().addClass('text-danger');
$(field).addClass('border-danger');
$(field).next().text(responses.special);
if (callback) callback({success: 0, msg: responses.special});
return false;
}
return true;
},
//----------------------------------
// INTEGER VALUE (int)
//----------------------------------
int: function(field) {
if (/^(\-|\+|)([\d]+)$/.test(field.value) === false) {
$(field).focus();
$(field).parent().addClass('text-danger');
$(field).addClass('border-danger');
$(field).next().text(responses.integer);
if (callback) callback({success: 0, msg: responses.integer});
return false;
}
field.value = field.value.remSN();
return true;
},
//----------------------------------
// REAL (real)
//----------------------------------
real: function(field) {
if (!/^(\+|\-|)(\d+)(.|)(\d+|)$/.test(field.value) === false) {
$(field).focus();
$(field).parent().addClass('text-danger');
$(field).addClass('border-danger');
$(field).next().text(responses.real);
if (callback) callback({success: 0, msg: responses.real});
return false;
}
return true;
},
//----------------------------------
// POSITIVE (pos)
//----------------------------------
pos: function(field) {
if (!/[-]/i.test(field.value)) {
$(field).focus();
$(field).parent().addClass('text-danger');
$(field).addClass('border-danger');
$(field).next().text(responses.pos);
if (callback) callback({success: 0, msg: responses.pos});
return false;
}
return true;
},
//----------------------------------
// EMAIL (email)
//----------------------------------
email: function(field) {
if (!/^([\w\-\.]+)@([\a-z0-9\.-]+)([a-z0-9]{2,3})$/i.test(field.value)) {
$(field).focus();
$(field).parent().addClass('text-danger');
$(field).addClass('border-danger');
$(field).next().text(responses.email);
if (callback) callback({success: 0, msg: responses.email});
return false;
}
return true;
},
//----------------------------------
// MATCH (match[name])
//----------------------------------
match: function(field, matchField) {
var required = document.getElementsByName(matchField)[0];
if (field.value !== required.value) {
$(field).focus();
$(field).parent().addClass('text-danger');
$(field).addClass('border-danger');
$(required).parent().addClass('text-danger');
$(required).addClass('border-danger');
$(field).next().text(responses.match);
if (callback) callback({success: 0, msg: responses.match});
return false;
}
return true;
},
//----------------------------------
// LENGTH (len[min, max] or len[exact])
//----------------------------------
len: function(field, range) {
var given = field.value.oneWS().length;
if (range[1] === undefined && given != range[0]) {
$(field).focus();
field.value = field.value.oneWS();
$(field).parent().addClass('text-danger');
$(field).addClass('border-danger');
$(field).next().text(responses.exact_len(range, given));
if (callback) callback({success: 0, msg: responses.exact_len(range, given)});
return false;
} else if (given < range[0] || given > range[1]) {
$(field).focus();
field.value = field.value.oneWS();
$(field).parent().addClass('text-danger');
$(field).addClass('border-danger');
$(field).next().text(responses.len(range[0], range[1], given));
if (callback) callback({success: 0, msg: responses.len(range[0], range[1], given)});
return false;
}
field.value = field.value.oneWS();
return true;
},
//----------------------------------
// RANGE (range[min,max])
//----------------------------------
range: function(field, range) {
var given = parseFloat(field.value);
if (isNaN(given)) {
$(field).focus();
$(field).parent().addClass('text-danger');
$(field).addClass('border-danger');
$(field).next().text(responses.number);
if (callback) callback({success: 0, msg: responses.number});
return false;
} else if (given < parseFloat(range[0]) || given > parseFloat(range[1])) {
$(field).focus();
$(field).parent().addClass('text-danger');
$(field).addClass('border-danger');
$(field).next().text(responses.range(range[0], range[1], given));
if (callback) callback({success: 0, msg: responses.range(range[0], range[1], given)});
return false;
}
return true;
}
}
//----------------------------------
// PERFORM THE VALIDATOR
//----------------------------------
for (var i in field_list) {
if ($(field_list[i]).parent().find('.validator-msg').length) {
$(field_list[i]).parent().find('.validator-msg').text('');
} else {
$(field_list[i]).after('<div class="form-text text-danger small validator-msg"></div>');
}
if ($(field_list[i]).parent().hasClass('text-danger')) {
$(field_list[i]).parent().removeClass('text-danger');
$(field_list[i]).removeClass('border-danger');
}
}
for (var i in field_list) {
if ($(field_list[i]).data('validate') != undefined) {
rules = $(field_list[i]).data('validate').split('|');
for (var x in rules) {
if (/len/.test(rules[x])) {
params = rules[x].match(/[0-9]+/g);
if (!check.len(field_list[i], params)) {
return false;
}
} else if(/match/.test(rules[x])) {
params = rules[x].match(/(?:\[)([a-z0-9\-_]+)/i)[1].toString();
if (!check.match(field_list[i], params)) {
return false;
}
} else if (/range/.test(rules[x])) {
params = rules[x].match(/[0-9]+/g);
if (!check.range(field_list[i], params)) {
return false;
}
} else {
if (!check[rules[x]](field_list[i])) {
return false;
}
}
}
}
}
if (callback) {
callback({
success: 1
});
}
}
});
using:
First, set up the input fields you want:
<form @submit.prevent="login(event.target)">
<input name='username' class='form-control' data-validate="required|len[3,16]|alphanum|nospace">
</form>
then, trigger the plugin:
login: function(e) {
$(e).validate(function(result) {
if (result.success) {
alert('Success!');
} else {
alert(result.msg);
}
})
}
First, set up the input fields you want:
<form @submit.prevent="login(event.target)">
<input name='username' class='form-control' data-validate="required|len[3,16]|alphanum|nospace">
</form>
then, trigger the plugin:
login: function(e) {
$(e).validate(function(result) {
if (result.success) {
alert('Success!');
} else {
alert(result.msg);
}
})
}
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.