This article defines how to use TextBox validation
using JQuery in ASP.NET.Taking three TextBox
and one Button control on the form. The form looks like this.
![jquery1.gif]()
Figure1
In this example we
use three JQueries as follows:
jquery-1.3.2.js
jquery-latest.js
jquery.validate.js
Now attach these JQueries using below link to attach jquery file.
http://www.vbdotnetheaven.com/uploadfile/rohatash/7155/
Example
<%@
Page Language="C#"
AutoEventWireup="true"
CodeBehind="WebForm1.aspx.cs"
Inherits="WebApplication66.WebForm1"
%>
<!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="Styles/ValidationStyle.css"
type="text/css"
/>
<script
type="text/javascript"
src="Scripts/jquery-1.3.2.js"></script>
<script
type="text/javascript"
src="Scripts/jquery-latest.js"></script>
<script
type="text/javascript"
src="Scripts/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
},
<%=TextIdea.UniqueID
%>: {
//minlength: 5,
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"
},
<%=TextIdea.UniqueID
%>:{
required: "Plaese enter your Ideas",
minlength: "Password must be
atleaet of 5 characters"
}
}
});
});
</script>
</head>
<body>
<form
id="form1"
runat="server">
<div>
User name
<asp:TextBox
ID="txtUserName"
runat="server"
Height="21px"
MaxLength="5"></asp:TextBox>
<br
/>
<br
/>
Password
<asp:TextBox
ID="txtPassword"
runat="server"
TextMode="Password"
MaxLength="5"
></asp:TextBox>
<br
/>
<br
/>
The Idea
<asp:TextBox
ID="TextIdea"
runat="server"
TextMode="MultiLine"></asp:TextBox>
<br
/>
<br
/>
<asp:Button
ID="btnSubmit"
runat="server"
Text="Submit"
/>
Css(StyleSheet)
File
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('unchecked.gif')
no-repeat;
padding-left: 20px;
margin-left: .3em;
vertical-align: middle;
background-color: #FFEBE8;
border: solid
1px red;
width: 170px;
}
label.valid
{
/*position:inherit;
background: url('checked.gif') no-repeat;
display:
block;
width:
16px;
height:
16px;
border:
none;
vertical-align:top;*/
position:absolute;
background: url('checked.gif')
no-repeat;
padding-left: 20px;
margin-left: .3em;
vertical-align:top;
background-color: #FFEBE8;
border:none;
width: 0px;
height: 16px;
}
Now run the application and test it.
![jquery2.gif]()
Figure2