$(function () { // on DOM ready var formValidation = (function ($) { // self executing anonymous function => Revealing module pattern var config = { 'fields': $('form input[type=text], form input[type=password], form input[type=email], form[type=number]') }; var init = function () { bindEvents(); }; var bindEvents = function () { // blur 'required' field $(datajs('req', 'required')).on('blur', blurHandler); // click 'submit' button $(datajs('type', 'submit')).on('click', clickHandler); }; // --- // event callbacks // --- var blurHandler = function (el) { var elem = $(el.currentTarget); var val = elem.val(); var dataType = elem.data('type'); var validateResult = validateField(val, dataType); console.log('Field validated... result: ' + JSON.stringify(validateResult, null, 4)); }; var clickHandler = function (el) { el.preventDefault(); // setup message for user var message = { 'result': 'success', 'message': '' }; // validate all fields config.fields.each(function (index, element) { var validateResult = validateField($(element).val(), $(element).data('type')); if (!validateResult.value) { // error in field message.message += validateResult.message + '|'; message.result = 'error'; } }); // return message to user console.log('Form validated... result: ' + JSON.stringify(message, null, 4)); }; // validate one field given its value and data type [email or phone] var validateField = function (v, dt) { var r = { 'value': true, 'message': '' }; if (v === '') { r.value = false; r.message = 'field empty'; } if (dt === 'email' && !isEmail(v)) { r.value = false; r.message = 'no valid emailaddress'; } else if (dt === 'phone' && !isPhone(v)) { r.value = false; r.message = 'no valid dutch phonenumber'; } return r; }; // --- // helpers // --- var datajs = function (key, value) { return document.querySelectorAll('[data-' + key + '=' + value + ']'); }; var isEmail = function (email) { var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/; return regex.test(email); }; var isPhone = function (phone) { // Dutch phonenumber, 10 digits var regex = /^([0-9]{10})+$/; return regex.test(phone); }; return { // expose functions via object literal init: init }; })(jQuery); formValidation.init(); });
<h2>Fill out the form below!</h2> <p>Open your console to see the validation messages</p> <form> <div class="form-cntr"> <input type="email" placeholder="Your email" data-req="required" data-type="email"> </div> <div class="form-cntr"> <input type="text" placeholder="Your username" data-req="required"> </div> <div class="form-cntr"> <input type="text" placeholder="Your telephone number" data-req="required" data-type="phone"> </div> <div class="form-cntr"> <button type="submit" data-type="submit">Click to validate</button> </div> </form>
.form-cntr { display: block; margin: 10px; width: 150px; } .form-cntr input { padding: 8px 20px; width:100%; } .form-cntr button[type=submit] { background: #fc0000; border: none; border-radius: 0; padding: 8px 20px; width:100%; color: white; } .form-cntr button[type=submit]:hover { cursor: pointer; background: #d50000; }