In
this article I would like to share with you how to use validation using JQuery
in asp.net. JQuery plays a major role for any technology. It is simple to
understand and easy to use. It can create impressive animations and
interactions.
Now
I am discussing about this article using the simple
article.
First
of all download uploaded file. In this application I am attaching three JQueries
as follows:
jquery-1.3.2.js
jquery-latest.js
jquery.validate.js
Example:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Validation Example using JQuery</title>
<link rel="stylesheet" href="ValidationStyle.css" type="text/css" />
<script type="text/javascript" src="script/jquery-1.3.2.js"></script>
<script type="text/javascript" src="script/jquery-latest.js"></script>
<script type="text/javascript" src="script/jquery.validate.js"></script>
<%--this
javascriptis used to show the message after valid statement.--%>
<script type="text/javascript">
jQuery.validator.setDefaults({
debug: true,
success: "valid"
}); ;
</script>
<%--write
the following javascript for passing the parameter for jquery--%>
<script type="text/javascript">
$(document).ready(function() {
$("#form1").validate({
rules: {
<%=txtUserName.UniqueID
%>: {
minlength: 5,
required: true
},
<%=txtPassword.UniqueID
%>: {
minlength: 5,
required: true
},
<%=txtEmail.UniqueID
%>: {
required: true
},
<%=txtURL.UniqueID
%>: {
required: true
}
}, messages: {
<%=txtUserName.UniqueID
%>:{
required: "Plaese enter your name",
minlength: "User name must be atleaet of 5 characters"
},
<%=txtPassword.UniqueID
%>:{
required: "Plaese enter your password",
minlength: "Password must be atleaet of 5 characters"
},
<%=txtEmail.UniqueID
%>:{
required: "Plaese enter your Email Id",
},
<%=txtURL.UniqueID
%>:{
required: "Plaese enter Website URL",
}
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<table width="50%" cellpadding="2" cellspacing="4" style="border: solid 1px navy;
background-color: #d5d5d5;">
<tr>
<td colspan="2" align="center">
<b>Validation Example using JQuery</b>
</td>
</tr>
<tr>
<td align="right" width="75px">
User Name
:
</td>
<td>
<asp:TextBox ID="txtUserName" runat="server" Width="180px"></asp:TextBox>
</td>
</tr>
<tr>
<td align="right">
Password
:
</td>
<td>
<asp:TextBox ID="txtPassword" runat="server" TextMode="Password" Width="180px"></asp:TextBox>
</td>
</tr>
<tr>
<td align="right">
Email Id
:
</td>
<td>
<asp:TextBox ID="txtEmail" runat="server" CssClass="email" Width="180px"></asp:TextBox>
</td>
</tr>
<tr>
<td align="right">
URL :
</td>
<td>
<asp:TextBox ID="txtURL" runat="server" CssClass="url" Width="180px"></asp:TextBox>
</td>
</tr>
<tr>
<td align="right">
</td>
<td align="left">
<asp:Button ID="btnSubmit" runat="server" Text="Submit" />
</td>
</tr>
</table>
</form>
</body>
</html>
Use
the following Style sheet
StyleSheet:
body{}
#field{margin-left: .5em;float:
right;}
#field, label{float:
left;font-family: Arial, Helvetica, sans-serif;font-size:
small;}
br{clear:
both;}
input{border:
1px solid black;margin-bottom: .5em;}
input.error{border:
1px solid red;}
label.error{position:absolute;background:
url('Images/unchecked.gif') no-repeat;padding-left: 20px; margin-left: .3em; vertical-align: middle;background-color: #FFEBE8;border:
solid 1px red;width:
250px;}
label.valid{position:inherit;background:
url('Images/checked.gif') no-repeat;display:
block;width:
16px;height:
16px;border:
none;vertical-align:top;}
Output:
Figure 1: All fields
are required
Figure 2: In the
first text box range should be atleast 5 characters.
Figure 3:
The input of the first textbox is valid. Here blue icon represent the valid
data.
Figure 4: Password
range must be atleast 5 characters
Figure 5: Check email
validation
Figure 6: Valid
email.
Figure 7: Check valid
url
Figure 8: All inputs
are valid.