Jquery Form Validation in Asp.Net:
For form validation first we have to design a form in HTML.
Example:
<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" />
</td>
</tr>
<tr>
<td style="height: 40px">
</td>
</tr>
<tr>
<td>
Email:
</td>
<td>
<asp:TextBox ID="txtEmail" runat="server" />
</td>
</tr>
<tr>
<td style="height: 40px">
</td>
</tr>
<tr>
<td>
City:
</td>
<td>
<asp:DropDownList ID="ddlCities" runat="server">
<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"/>
</td>
</tr>
<tr>
<td style="height: 40px">
</td>
</tr>
<tr>
<td>
Confirm Password:
</td>
<td>
<asp:TextBox ID="txtConfirmPassword" TextMode="Password" runat="server"/>
</td>
</tr>
<tr>
<td style="height: 40px">
</td>
</tr>
<tr>
<td>
Mobile Phone Number:
</td>
<td>
<asp:TextBox ID="txtPhoneNumber" runat="server"/>
</td>
</tr>
<tr>
<td style="height: 40px">
</td>
</tr>
<tr>
<td>
Birth Date (dd/MM/yyyy):
</td>
<td>
<asp:TextBox ID="txtBirthDate" runat="server"/>
</td>
</tr>
<tr>
<td style="height: 40px">
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button Text="Submit" runat="server" />
</td>
</tr>
</table>
</form>
Now add the following js file containing the scripts and the JavaScript code, in your project, In this example we are 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>
For validating the controls we just need to add the CssClass="validate[required]" to it.
Example:
<asp:TextBox ID="txtEmail" runat="server" CssClass="validate[required,custom[email]]" />
For comparing the value of two fields such as comparing passwords we can use
CssClass="validate[equals[id of the field to be compared]]"
Example: Comparing Passwords-
<asp:TextBox ID="txtPassword" runat="server" TextMode="Password" CssClass="validate[required]" />
<asp:TextBox ID="txtConfirmPassword" TextMode="Password" runat="server" CssClass="validate
[required,equals[txtPassword]]" />
For Number validation i.e. the input data is only integer we can use CssClass="validate
[custom[integer]]"
For minimum & maximum length of the input data we can use CssClass="validate[maxSize
[range],minSize[range]]"
Example:
<asp:TextBox ID="txtPhoneNumber" runat="server" CssClass="validate[required,custom
[integer],maxSize[10],minSize[10]]" />
Calling custom functions along with the Jquery Validation:
We can see the following script in the js file:
<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>
This is a custom function written to validate the date.
The following example explains how to use this function along with the validate class.
Example:
<asp:TextBox ID="txtBirthDate" runat="server" CssClass="validate[required,funcCall[DateFormat[]]" />
Sample form with complete Jquery 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>
0 Comment(s)