In this article I will explain how to perform form validation using jQuery Validation Plugin.
The various form fields like TextBox, DropDownList, etc. and the type of validations involved would be Required, Email, Password confirmation, Minimum and Maximum Length, Telephone number, Mobile Cell number, Date Format such as dd/MM/yyyy dates.
 
HTML Markup
The HTML Markup consists of an ASP.Net Page with various Form Fields such as TextBox, DropDownLists, etc. You will notice that there are some CSS classes applied for the TextBox and DropDownList controls, these are added for jQuery Validation and will be explained later.
<form id="form1" runat="server">
<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
        </td>
        <td>
            Please fill the following Form
        </td>
    </tr>
    <tr>
        <td style="height: 40px">
        </td>
    </tr>
    <tr>
        <td>
            Name:
        </td>
        <td>
            <asp:TextBox ID="txtName" runat="server" CssClass="validate[required]" />
        </td>
    </tr>
    <tr>
        <td style="height: 40px">
        </td>
    </tr>
    <tr>
        <td>
            Email:
        </td>
        <td>
            <asp:TextBox ID="txtEmail" runat="server" CssClass="validate[required,custom[email]]" />
        </td>
    </tr>
    <tr>
        <td style="height: 40px">
        </td>
    </tr>
    <tr>
        <td>
            City:
        </td>
        <td>
            <asp:DropDownList ID="ddlCities" runat="server" CssClass="validate[required]">
                <asp:ListItem Text="Please Select" Value="" />
                <asp:ListItem Text="Mumbai" Value="1" />
                <asp:ListItem Text="Delhi" Value="2" />
                <asp:ListItem Text="Kolkatta" Value="3" />
                <asp:ListItem Text="Chennai" Value="4" />
            </asp:DropDownList>
        </td>
    </tr>
    <tr>
        <td style="height: 40px">
        </td>
    </tr>
    <tr>
        <td>
            Password:
        </td>
        <td>
            <asp:TextBox ID="txtPassword" runat="server" TextMode="Password" CssClass="validate[required]" />
        </td>
    </tr>
    <tr>
        <td style="height: 40px">
        </td>
    </tr>
    <tr>
        <td>
            Confirm Password:
        </td>
        <td>
            <asp:TextBox ID="txtConfirmPassword" TextMode="Password" runat="server" CssClass="validate[required,equals[txtPassword]]" />
        </td>
    </tr>
    <tr>
        <td style="height: 40px">
        </td>
    </tr>
    <tr>
        <td>
            Mobile Phone Number:
        </td>
        <td>
            <asp:TextBox ID="txtPhoneNumber" runat="server" CssClass="validate[required,custom[integer],maxSize[10],minSize[10]]" />
        </td>
    </tr>
    <tr>
        <td style="height: 40px">
        </td>
    </tr>
    <tr>
        <td>
            Birth Date (dd/MM/yyyy):
        </td>
        <td>
            <asp:TextBox ID="txtBirthDate" runat="server" CssClass="validate[required,funcCall[DateFormat[]] " />
        </td>
    </tr>
    <tr>
        <td style="height: 40px">
        </td>
    </tr>
    <tr>
        <td>
        </td>
        <td>
            <asp:Button Text="Submit" runat="server" />
        </td>
    </tr>
</table>
</form>
 
jQuery Form Validations Example in ASP.Net - Validate TextBox, DropDownList, Date Format, Email Address and Mobile Number using jQuery in ASP.Net
 
Scripts and CSS for the jQuery Validation Engine Plugin
You need to place the following JavaScript inherited scripts and the JavaScript code on the page where you need to perform the Form Validations. In this example I am making use of the jQuery ValidationEngine plugin.
<link href="ValidationEngine.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.ucb.org.br/Scripts/formValidator/js/languages/jquery.validationEngine-en.js"
    charset="utf-8"></script>
<script type="text/javascript" src="http://cdn.ucb.org.br/Scripts/formValidator/js/jquery.validationEngine.js"
    charset="utf-8"></script>
<script type="text/javascript">
    $(function () {
        $("#form1").validationEngine('attach', { promptPosition: "topRight" });
    });
    function DateFormat(field, rules, i, options) {
        var regex = /^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}$/;
        if (!regex.test(field.val())) {
            return "Please enter date in dd/MM/yyyy format."
        }
    }
</script>
 
 
Explanation:
Basic Required Validation
For Required validation you simply need to set the CssClass property as CssClass="validate[required]" for the TextBox or DropDownList control.
<asp:TextBox ID="txtName" runat="server" CssClass="validate[required]" />
 
Note: For the DropDownList control it is necessary that the value for the first or default item is set to blank as shown below.
<asp:DropDownList ID="ddlCities" runat="server" CssClass="validate[required]">
    <asp:ListItem Text="Please Select" Value="" />
    <asp:ListItem Text="Mumbai" Value="1" />
    <asp:ListItem Text="Delhi" Value="2" />
    <asp:ListItem Text="Kolkatta" Value="3" />
    <asp:ListItem Text="Chennai" Value="4" />
</asp:DropDownList>
 
Email Address Validation
If you want to validate a TextBox that will accept email address as input you need to set the CssClass property as CssClass="validate[required,custom[email]]" for the TextBox. Thus here first the TextBox will check whether Field contains data and then perform email address validation.
 
<asp:TextBox ID="txtEmail" runat="server" CssClass="validate[required,custom[email]]" />
 
 
Confirm Password or Confirm Email Address Validation
 
When you want to ask some entity to be confirmed by re-entering the value in other TextBox for example, comparing Passwords, comparing Email addresses, etc., in such cases you can make use of the Compare Validation by setting the CssClass property as validate[required,equals[txtPassword]] for the Confirmation TextBox.
You will notice that here I have specified the ID of the TextBox with whom we need to compare the value.
 
The above validation makes sure that the second TextBox must contain value and the value must be equal to the TextBox whose ID has been specified along with the equals CSS class.
 
<asp:TextBox ID="txtPassword" runat="server" TextMode="Password" CssClass="validate[required]" />
<asp:TextBox ID="txtConfirmPassword" TextMode="Password" runat="server" CssClass="validate[required,equals[txtPassword]]" />
 
 
Integer, Numbers (Numeric), Minimum Length, Maximum Length and Phone Validation
 
This plugin also provides validation for numbers i.e. numeric data and also that the data length must have some minimum and maximum characters. Thus to club all these into one I have used mobile number field as it must contain numbers plus both the minimum and maximum number must be equal to 10.
<asp:TextBox ID="txtPhoneNumber" runat="server" CssClass="validate[required,custom[integer],maxSize[10],minSize[10]]" />
 
Date Format Validation (dd/MM/yyy)
This plugin does have Date Format Validation but for ISO Date format i.e. yyyy-mm-dd. But this does not mean we cannot validate with dd/MM/yyyy format, this plugin has provision to add custom validation scripts.
<script type="text/javascript">
    function DateFormat(field, rules, i, options) {
        var regex = /^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}$/;
        if (!regex.test(field.val())) {
            return "Please enter date in dd/MM/yyyy format."
        }
    }
</script>
 
The above JavaScript function is the custom function that I have created. In order to define a Custom Validation function, you need to keep in mind few things
1. It must accept 4 parameters always field, rules, i and options.
2. When throwing error you need to return string message that you want to display.
Once the function is ready you can call it by setting the CssClass property as CssClass="validate[required,funcCall[DateFormat[]]".
<asp:TextBox ID="txtBirthDate" runat="server" CssClass="validate[required,funcCall[DateFormat[]]" />
 
jQuery Form Validations Example in ASP.Net - Validate TextBox, DropDownList, Date Format, Email Address and Mobile Number using jQuery in ASP.Net
 
Demo
 
Downloads