Morshed Alam
Morshed Alam Software Architect

Form validation using jQuery

• By Morshed Alam • JavaScript
I have written a simple form validation script using jQuery for one of my projects though it have improvement opportunity. Anyone can use it easily by following four simple steps below:

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|FirstsName|LastsName)/.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...

View Demo



Comments (0)

No comments yet. Be the first to share your feedback or ask a question!

Leave a Comment