This will show you how you
can use ValidatorCalloutExtender to validate textbox control and
displaying the error message in tool tip. In this article I have used TextBox, RequiredFieldValidator,
ValidatorCalloutExtender, RegularExpressionValidator.
Some of my previous articles are as follows:
jQuery
Validation for Terms and Conditions Checkbox in Asp.Net, GridView
Validation Of TextBox Using RequiredFieldValidator Control Asp.Net Using C#.Net,
Email
Validation in Windows Application C#.Net and VB.Net, RadioButtonList
Validation Using jQuery in Asp.Net, Client
Side Validation of File Type or Extention Permited to Upload in Asp.Net Using
Javascript, How
to Restrict User To Enter Only Numbers in Textbox Using JavaScript In Asp.Net.
So for this article first we will create new asp.net
application and add the below html tag into your page.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxValidationByToolTip.aspx.cs"
Inherits="ProjectDemo_Asp.et.AjaxValidationByToolTip"
%>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
TagPrefix="asp"
%>
<!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>Display Validation in ToolTip Using ValidatorCalloutExtender in Asp.Net</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<table width="300px">
<tr>
<td align="right">
Name :
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ErrorMessage="Please
enter name."
Style="color: #FF0000"
ControlToValidate="TextBox1"
Display="None">*</asp:RequiredFieldValidator>
<asp:ValidatorCalloutExtender
ID="ValidatorCalloutExtender1"
runat="server"
TargetControlID="RequiredFieldValidator1">
</asp:ValidatorCalloutExtender>
</td>
</tr>
<tr>
<td align="right">
Email :
</td>
<td>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
ErrorMessage="Please
enter email id."
Style="color: #FF0000"
ControlToValidate="TextBox2"
Display="None">*</asp:RequiredFieldValidator>
<asp:ValidatorCalloutExtender
ID="ValidatorCalloutExtender2"
runat="server" TargetControlID="RequiredFieldValidator2">
</asp:ValidatorCalloutExtender>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1"
runat="server"
ControlToValidate="TextBox2"
Display="None"
ErrorMessage="Please
enter a valid email id." style="color: #FF0000">*</asp:RegularExpressionValidator>
<asp:ValidatorCalloutExtender
ID="ValidatorCalloutExtender4"
runat="server" TargetControlID="RegularExpressionValidator1">
</asp:ValidatorCalloutExtender>
</td>
</tr>
<tr>
<td align="right">
Address :
</td>
<td>
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server"
ErrorMessage="Please
enter address."
Style="color: #FF0000"
ControlToValidate="TextBox3"
Display="None">*</asp:RequiredFieldValidator>
<asp:ValidatorCalloutExtender
ID="ValidatorCalloutExtender3"
runat="server" TargetControlID="RequiredFieldValidator3">
</asp:ValidatorCalloutExtender>
</td>
</tr>
<tr>
<td align="right" colspan="2">
</td>
</tr>
<tr>
<td align="right">
</td>
<td>
<asp:Button ID="Button1" runat="server" Text="Submit" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
|
In above you have notices in RequiredFieldValidator I have
set Display="None".
So why I have set this, if you not set this on that case
with tool tip you will get the validation message also as shown below.
So we have done just run the page and check the output.
About the Author
0 comments:
Please let me know your view