Introduction
In two of my previous article I told you about:
But in that article I used HTML Controls. What to do if I need to use ASP.NET Controls? If we want to save any data or we want to transfer any data then we need to either use ASP.NET Controls or we need to pass runat="server" in the HTML Control, in both the cases our previous validation will stop working, this article will solve this problem.
This article explains how to Apply jQuery Validation on ASP.NET Controls.
Step 1
First of all you need to download two external files (.js) files, these are:
- jQuery.js
- jQuery.validate.js
These can be either downloaded from the jQuery official WebSite or you can download the Zip File present at the start of this article.
After downloading you need to apply them in the Head Section of your application.
<head runat="server">
<title></title>
<script src="jquery.js"></script>
<script src="jquery.validate.js"></script>
</head>
Step 2
Now I will use some ASP.NET Textboxes and a Button.
<div>
<span>First Name</span>
<asp:TextBox Id="name" runat="server" ></asp:TextBox>
</div>
<div>
<span >E-Mail ID</span>
<asp:TextBox Id="email" runat="server" ></asp:TextBox>
</div>
<div >
<span >Mobile Number</span>
<asp:TextBox Id="field" runat="server" MaxLength="10" ></asp:TextBox>
</div>
<div>
<asp:Button runat="server" Text="submit" />
</div>
Here I took three Textboxes, separate ID's are passed to each TextBox, then one Button is used.
Step 3
Now I will Apply Validation on these TextBoxes, for this you need to create this function in the Head Section of your application:
<script>
$(document).ready(function() {
$("#form1").validate({
rules: {
<%=name.UniqueID %>:{
required:true
},
<%=email.UniqueID %>: {
required: true,
email: true
},
<%=field.UniqueID %>: {
required: true,
digits:true
}
}
});
});
</script>
First I had passed the name of the Form that is to be validate, then in the rules we need to provide the validations that are to be applied on each TextBox.
These Validations are applied on the ID of each TextBox, for the first TextBox, Required Field validation is applied. Validation is applied in this manner:
<%ID of Control.UniqueID%>
Then validations are applied in the brackets, like required:true or email:true.
Now our validations are applied and we can run our application to see the output.
Output
On running the application I clicked on the Button and you can see that validations had begun their work.
jquery1----
Now I have provided my Name in the first TextBox and you can see that the validation has gone from it. But since I provided an invalid mail ID the validation for the proper mail was shown in an error message.
![Apply jquery Validation on Asp.Net Controls]()
Now I provided a proper mail Id and Validation for the mail Id is gone, but since I provided the letters instead of a mobile number, again an error message is displayed for entering numbers only:
![Apply jquery Validation on Asp.Net Controls]()
On providing the numbers the error is gone:
![Apply jquery Validation on Asp.Net Controls]()
Custom Error Message
You can also provide a custom error message, this can be done by adding a message in the JavaScript function as in the following:
messages: {
<%=name.UniqueID %>:{
required: "* Required Field *"
}
}
Output
![Apply jquery Validation on Asp.Net Controls]()
The complete code of this application is as follows:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery.js"></script>
<script src="jquery.validate.js"></script>
<script>
$(document).ready(function() {
$("#form1").validate({
rules: {
<%=name.UniqueID %>:{
required:true
},
<%=email.UniqueID %>: {
required: true,
email: true
},
<%=field.UniqueID %>: {
required: true,
digits:true
}
}, messages: {
<%=name.UniqueID %>:{
required: "* Required Field *"
}
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<span>First Name</span>
<asp:TextBox Id="name" runat="server" ></asp:TextBox>
</div>
<div>
<span >E-Mail ID</span>
<asp:TextBox Id="email" runat="server" ></asp:TextBox>
</div>
<div >
<span >Mobile Number</span>
<asp:TextBox Id="field" runat="server" MaxLength="10" ></asp:TextBox>
</div>
<div>
<asp:Button runat="server" Text="submit" />
</div>
</form>
</body>
</html>