jQuery Form Validation

jquery.validate.js plugin is written and maintained by Jörn Zaefferer, a member of the jQuery team, lead developer on the jQuery UI team and maintainer of QUnit. It was started back in the early days of jQuery in 2006, and updated and improved since then.

Example with custom methods and error display in alert box *
*
*
*

Javascript Source


    jQuery(document).ready(function () {
        initDate();

        InitValidator();
    });

    // Extend the validation rules
    // requires the text "demo", we define a default message, too
    $.validator.addMethod("demo", function (value) {
        return value == "demo";
    }, 'Please enter "demo"!');

    // requires the value to be the same as the first parameter
    $.validator.methods.equal = function (value, element, param) {
        return value == param;
    };


    // FORM VALIDATION
    function InitValidator() {

        var validator = $("#frmMain").validate({
            debug: false,
            errorPlacement: function (error, element) {
                return true;
            },
            highlight: function (element, errorClass) {
                $(element).next('.error').show();
                $(element).next().next('.error').show();
            },
            unhighlight: function (element, errorClass) {
                $(element).next('.error').hide();
                $(element).next().next('.error').hide();
            },
            invalidHandler: function (form, validator) {
                var errorCount = validator.numberOfInvalids();
                if (errorCount > 0) {
                    var errorList = validator.errorList;

                    var summary = "Please correct the following:\n";
                    $.each(errorList, function () { summary += " - " + this.message + "\n"; });

                    alert(summary);
                }
                validator.focusInvalid();
            }
        });


        $('#txtNumber').rules('add',
         { required: true,
           minlength: 3,
           maxlength: 15,
           number: true,
           messages: { required: 'Please enter a number with at least 3 and max 5 digits!' }
         });

        $('#txtSecret').rules('add',
         { demo: true,
             messages: { demo: 'Please enter "demo"!' }
         });

         $('#txtMath').rules('add',
         { equal: 11
         });

     // Clear required indicator if the field is not empty
     HideRequiredFieldIndicators();
    }

    function HideRequiredFieldIndicators() {

        var colInput = $('[Required=true]');

        $.each(colInput, function () {
            var oField = $(this);
            if (oField.val() != '') {
                var oInd = oField.next('.error');
                if (oInd.length == 0) // DatePicker
                    oInd = oField.next().next('.error');

                oInd.hide();
            }
        });

    }
    
    
    function initDate() {
       $.datepicker.setDefaults(
       {
           showOn: 'button',
           buttonImageOnly: true,
           buttonImage: 'http://www.bangtech.com/share/mm/web/ico_calendar.png'
       });

        $("#txtDOB").datepicker(
        {
            maxDate: new Date,
            yearRange: "c-50:c",
            changeMonth: true,
            changeYear: true,
            showOtherMonths: true,
            selectOtherMonths: true
        });
    }