Total Pageviews

Monday, 17 June 2013

javascript for Client side Validation

$(document).ready(function () {
    $('#btnName').click(function () {
        $("#formName").validate({
            errorLabelContainer: $("ul", $('div.error-container')),
            wrapper: 'li',
            errorClass: "errorfield",
            rules: {
                Name: { required: true, alpha: true },
                Email: { required: true, email: true  },
                PhoneNumber: { required: true, maxlength: 10 },
                Password: { required: true, minlength: 6 },
                ConfirmPassword: { required: true, equalTo: "#Password"  }
            },
            messages: {
                Name: { required: "Please enter Name", alpha: "Only characters,dot and uderscore allowed" },
                Email: { required: "Error Message", email: "Error Message" },
                PhoneNumber: { required: "Error Message", maxlength: "Error Message" },
                Password: { required: "Error Message", minlength: "Error Message"},
                ConfirmPassword: { required: "Error Message",equalTo: "Error Message" }
            }
        });
    });
});

Default rules available:
required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date (ISO).",
number: "Please enter a valid number.",
digits: "Please enter only digits.",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please enter the same value again.",
accept: "Please enter a value with a valid extension.",
maxlength: $.validator.format("Please enter no more than {0} characters."),
minlength: $.validator.format("Please enter at least {0} characters."),
rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
range: $.validator.format("Please enter a value between {0} and {1}."),
max: $.validator.format("Please enter a value less than or equal to {0}."),
min: $.validator.format("Please enter a value greater than or equal to {0}.")

We can define our custom rules by adding following function:
jQuery.validator.addMethod("alpha", function (value, element) {
    if (value != null && value != undefined && value != "") {
        return /^[a-zA-Z][a-zA-Z\s\-]+$/.test(value);
    }
    else {
        return true;
    }
}, "");

No comments:

Post a Comment