Email, UserName, password, URL Validation using JQuery in Asp.net.
In this Article we will see Some useful validation Using JQuery in asp.net using Jquery Validation Plug-in must be useful for Login page or User Registration page etc..
We will also see how to perform validation in a asp.net web page which uses master page.
As we know that JQuery is a javascript library and using thins we can able to write some like animation, Validation using minimum code.
Lets Start with first with a page which does not uses Master Page and later in this article we will see JQuery Validation with Master Page.
Step 1 : Download the JQuery Plug in from Here and JQuery Validation Script Plug-in From here both are .js file.
Step 2 : Add the above file reference in your asp.net web page under <Head>
</Head> Page
Eg.
<script type="text/javascript" src="script/jquery-1.3.2.js"></script>
<script type="text/javascript" src="script/jquery.validate.js"></script>
Step 3: Declare asp.net text box in your form
<asp:TextBox ID="txtUserName" runat="server" Width="230px"></asp:TextBox>
Step 4: Now add you Jquery validation code inside <Script></Script> tag under <Head></Head> tag.
For eg in this we have taken a text box with id txtUserName and form name form1
<script type="text/javascript">
$(document).ready(function() {
"#form1").validate({
true
},
messages: {
<%=txtUserName.UniqueID %>:{
required: "Plaese Enter your username",
"User name must be atleaet of 5 characters"
</script>
Now we will see one by one Email, UserName, password, URL Validation using JQuery in Asp.net.
UserName Validation Using JQuery
below is the JQuery Script to validate User Name whhich is required field and Accept minimum 5 Characters
<script type="text/javascript">
$(document).ready(function() {
"#form1").validate({
true
}
}, messages: {
<%=txtUserName.UniqueID %>:{
required: "Plaese Enter your username",
"User name must be atleaet of 5 characters"
</script>
and HTML Code for the UserName Textbox
<asp:TextBox ID="TxtUserName" runat="server"></asp:TextBox>
Password Require field Validation using JQuery
Below is JQuery code to validate Password Field which is required field and should have minimum 5 characters
<script type="text/javascript">
$(document).ready(function() {
"#form1").validate({
true
}
}, messages: {
<%=txtPassword.UniqueID %>:{
required: "Plaese Enter your password",
"Password must be atleaet of 5 characters"
</script>
and the HTML code for the Password Field which is required field and should have at least 5 characters
<asp:TextBox ID="txtPassword" runat="server" TextMode="Password" Width="230px"></asp:TextBox>
Email Validation Using JQuery
here is the script to validate Email using JQuery
<script type="text/javascript">
$(document).ready(function() {
"#form1").validate({
true
}
}, messages: {
<%=txtEmail.UniqueID %>:{
required: "Plaese Enter your Email Id",
</script>And HTML code for the input TextBox
<asp:TextBox ID="txtEmail" CssClass="email" runat="server" Width="230px"></asp:TextBox>
Note: Here you have to set CssClass properties to "email" to validate Email Format other wise it will not validate email format.
URL Validation using JQuery
Below is Script to validate URL of website using JQuery
<script type="text/javascript">
$(document).ready(function() {
"#form1").validate({
true
}
}, messages: {
<%=txtURL.UniqueID %>:{
required: "Plaese Enter Website URL",
</script>and the HTML code for the input Textbox for the URL
<asp:TextBox ID="txtURL"runat="server" CssClass="url" ></asp:TextBox>
Note: Here you have to set CssClass properties to "url" to validate URL Format other wise it will not validate URL format.
JQuery Validation using Master Page
Now if you have Master page and than another webpage which consume master page than just add the reference of the script inside Head tag and in a webpage say you have
Registar.aspx than go to registar.aspx page and inside the content Tag you can Write your script tag this is the only difference of implementation of JQuery Validation for with and without master page for eg
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script type="text/javascript">
$(document).ready(function() {
"#aspnetForm").validate({
true
}
}, messages: {
<%=txtUserName.UniqueID %>:{
required: "Plaese Enter your username",
"User name must be atleaet of 5 characters"
</script>
<table style="width:100%;">
<tr>
<td>
<asp:TextBox ID="txtUserName" runat="server" Width="230px"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" />
</td>
</tr>
</table>
</asp:Content>
Error Message Decoration
To Decorate error message generated by Jquey you can use css like this and you can add this your custom css file you inside Head Tag
<style type="text/css">
label.error { color: red; vertical-align: top; }
</style>
What is the Difference Between Asp.Net Validation control and jQuery Validation and which one good.
Well the difference is Asp.net validation control will execute both in Client and server side if javascript is disabled than validation control will fired in server side where as JQuery plug-in is based
on javascript and so will will fire in client side. Now if up to you which on you should use.
jQuery Plug in is tested on IE, Firefox, Safari, Chrome and most other popular browser.
Hope this will help all to understand JQuery Validation in your asp.net web page.
If you run the sample project attached below and run it you will see JQuery validation result like this
You can download the sample code used in above example.