Bootstrap 4 Form Validator | 1.1.0

$.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; }, //---------------------------------- // INTEGER VALUE (int) //---------------------------------- int: function(field) { if (/[^\-+0-9]/i.test(field.value)) { $(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; }, //---------------------------------- // 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; }, //---------------------------------- // REAL (real) //---------------------------------- real: function(field) { if (!/^([\-+0-9]+)([.0-9])([0-9]+)$/.test(field.value)) { $(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 (!/^([+0-9.]+)$/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('.form-text').length) { $(field_list[i]).parent().find('.form-text').text(''); } else { $(field_list[i]).after('<div class="form-text text-danger small"></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);
}
})
}

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.