In this article , I have
explained validation using Jquery in Asp.net. Validation using jquery is better
than JavaScript. For validation using JQuery I have used Jquery file. So first
Download the required Jquery file which is attached in download code..
Now I have to design a page
means put some control on page and write Jquery code.
<%@ Page Language="C#"
AutoEventWireup="true"
CodeFile="ValiDationUsingJquery.aspx.cs"
Inherits="ValiDationUsingJquery"
%>
<!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 id="Head1"
runat="server">
<title>Show Inline validation Messages</title>
<link href="CSS/template.css"
rel="stylesheet"
type="text/css"
/>
<link href="CSS/validationEngine.jquery.css"
rel="stylesheet"
type="text/css"
/>
<script src="Scripts/jquery-1.6.min.js"
type="text/javascript"></script>
<script src="Scripts/jquery.validationEngine-en.js"
type="text/javascript"
charset="utf-8"></script>
<script src="Scripts/jquery.validationEngine.js"
type="text/javascript"
charset="utf-8"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#form1").validationEngine();
});
</script>
</head>
<body>
<form id="form1"
runat="server">
<table align="center">
<tr>
<td colspan="2">
<div style="border:
1px solid #CCCCCC; padding: 10px;">
<table cellpadding="0" cellspacing="30" style=" background-color:White">
<tr>
<td>First Name:</td>
<td><asp:TextBox ID="txtfname" runat="server" CssClass="validate[required]"/></td>
</tr>
<tr>
<td>Last Name:</td>
<td><asp:TextBox ID="TextBox1" runat="server" CssClass="validate[required]"/></td>
</tr>
<tr>
<td>Last Name:</td>
<td><asp:TextBox ID="txtlname" runat="server" CssClass="validate[required]"/></td>
</tr>
<tr>
<td>Last Name:</td>
<td><asp:TextBox ID="TextBox2" runat="server" CssClass="validate[required]"/></td>
</tr>
<tr>
<td>Last Name:</td>
<td>
<asp:Button ID="btnSubmit"
runat="server"
Text="Submit"
onclick="btnSubmit_Click"
/>
</tr>
</table>
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
For validation of textbox , I have not use one by one id of textbox
.Because I have to call every textbox id in jquery function. So it’s better to
call form id which will pass all the form control id automatically.
When you will click on submit button ,it will show the error message. It
will also show the error message when you pass the empty textbox.
Click here to download Code.
No comments:
Post a Comment
Note: only a member of this blog may post a comment.