Morshed Alam

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…