In this article I will explain with an example, how to perform Form validation using jQuery in ASP.Net.
This article makes use of jQuery ValidationEngine plugin for performing validation.
jQuery ValidationEngine plugin will perform validation for 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.
Download jQuery ValidationEngine Plugin
You can download the jQuery ValidationEngine plugin using the link below.
HTML Markup
The following HTML Markup consists of an ASP.Net Form.
The ASP.Net Form consists of some TextBoxes, a DropDownList and an ASP.Net Button.
The TextBoxes and DropDownList to be validated have been set with the CssClass property. This particular CSS class will be used by jQuery ValidationEngine plugin for validation.
<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>
Implementing the jQuery ValidationEngine Plugin
First, you need to inherit the jQuery library and jQuery ValidationEngine plugin Scripts and the CSS files on the page.
Then inside the jQuery document ready event handler, the jQuery ValidationEngine plugin is applied to the Form.
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/validationEngine.jquery.min.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/jquery.validationEngine.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/languages/jquery.validationEngine-en.min.js"></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, the CssClass property is set as validate[required] for the TextBox or DropDownList controls.
<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
For validate a TextBox that will accept email address as input, the CssClass property is set as validate[required,custom[email]].
This ensures that the TextBox will contains data and then perform email address validation.
<asp:TextBox ID="txtEmail" runat="server" CssClass="validate[required,custom[email]]" />
Confirm Password Validation
In order to validate Confirm Password, the CssClass property is set as validate[required,equals[txtPassword]].
The following 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.
Note: You will notice that the ID of TextBox is specified with whom the value needs to be compared.
<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
jQuery ValidationEngine plugin also provides validation for numbers i.e. numeric data and also the data length must have some minimum and maximum characters.
In order to validate this, the custom, maxSize and minSize need to be specified.
<asp:TextBox ID="txtPhoneNumber" runat="server" CssClass="validate[required,custom[integer],maxSize[10],minSize[10]]" />
Date Format Validation (dd/MM/yyyy)
jQuery ValidationEngine plugin validates ISO Date format i.e. yyyy-mm-dd.
In order to validate Date with dd/MM/yyyy format, this plugin has provision to add custom validation scripts.
The following custom JavaScript function validates Date with dd/MM/yyyy format and it accepts 4 parameters field, rules, i and options.
Finally, a string message is returned when validation fails.
<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>
Once the function is ready, the CssClass property need to be set as validate[required,funcCall[DateFormat[]].
<asp:TextBox ID="txtBirthDate" runat="server" CssClass="validate[required,funcCall[DateFormat[]]" />
Screenshot
![jQuery Form Validation Example in ASP.Net]()
Demo
Downloads
