STEP 1: Add jQuery plugin to your application
STEP 2: Copy following codes in to a JavaScript file and add the file after jQuery plugin
var Form = { errors:0, validation_class:'.validate-form', //Form class name to validate novalidate_class:'.no-validate-form', //Class name to ignore validation invalid_class:'invalid', //Class name to highlight invalid input required_class:'required', //Class name to validate required field //Use hash keys below as a class name to validate regex_to_validate:{ 'validate-password':/^[A-Za-z0-9!@#$%^&*()_]{6,20}$/, 'validate-numeric':/^(\d|-)?(\d|,)*\.?\d*$/, 'validate-username':/^[A-Za-z0-9_]{5,20}$/, 'validate-email':/^[a-zA-Z0-9._-]+@([a-zA-Z0-9.-]+\.)+[a-zA-Z0-9.-]{2,4}$/ }, message_id:'#validation_message', error_message:'Please fix missing or erroneous entries marked with red borders.', addError:function (item) { item.addClass(Form.invalid_class).css("border", "1px solid red"); }, removeError:function (item) { item.removeClass(Form.invalid_class).css('border', ''); }, flashMessage:function () { if (Form.errors) { if ($(Form.message_id).length) { $(Form.message_id).html(Form.error_message) .css('display', 'block') .css('font-size', '10px') .css('color', 'red') .css('padding', '5px 0'); } else { alert(Form.error_message); } } }, classNames:function () { var class_names = '.' + Form.required_class; $.each(Form.regex_to_validate, function (key, value) { class_names += (class_names == '' ? '' : ', '); class_names += '.' + key; }); return class_names; }, replaceItemText:function (item) { var val = item.val(); item.focusin(function () { if (/^(Title|First\sName|Last\sName)/.test($(this).val())) { $(this).val(''); } }); item.focusout(function () { if ($(this).val() == '') { $(this).val(val); } }); }, runtimeValidation:function () { var class_name; $(Form.validation_class).find(Form.classNames()).each(function () { class_name = $(this).attr('class').toString(); if (class_name.indexOf('replace-text') != -1) { Form.replaceItemText($(this)); } $(this).focusout(function () { Form.validItem($(this)); }); }); }, validItem:function (item) { var error = false; var class_name = item.attr('class').toString(); if (class_name.indexOf(Form.required_class) != -1 && item.val().toString() == '') { Form.addError(item); error = true; } else { $.each(Form.regex_to_validate, function (key, value) { if (class_name.indexOf(key) != -1 && !value.test(item.val())) { Form.addError(item); error = true; return; } }); } if (!error) Form.removeError(item); return !error; }, validateItems:function () { Form.errors = 0; $(Form.validation_class).find(Form.classNames()).each(function () { Form.errors += (Form.validItem($(this)) ? 0 : 1); }); Form.flashMessage(); } }; $(document).ready(function () { Form.runtimeValidation(); $(Form.validation_class).submit(function () { Form.validateItems(); return !Form.errors }); $(Form.novalidate_class).submit(function () { return true; }); });
STEP 3: Customize form validation settings like class names and message as you want
STEP 4: Put the class names in to your form to validate
That's all. Now just click in to the submit button and see the magic...
No comments:
Post a Comment