Home > DeveloperSection > Articles > Ajax Toolkit ValidatorCalloutExtender Control in ASP.Net

Ajax Toolkit ValidatorCalloutExtender Control in ASP.Net

Posted by  Pushpendra Singh
on    December-05-2010 16:47 PM

AJAX AJAX 
Ratings:
0 Comment(s)
 9084  View(s)
Rate this:

Ajax Toolkit ValidatorCalloutExtender Control in ASP.Net

ValidatorCallout is an ASP.NET AJAX extender that enhances the functionality of existing ASP.NET validators. To use this control, add an input field and a validator control as you normally would. Then add the ValidatorCallout and set its TargetControlID property to reference the validator control.

ValidatorCallout Properties:

·         TargetControlID - The ID of the Validator to extend

·         Width - The width of the callout

·         WarningIconImageUrl - The path to a custom warning icon image

·         CloseImageUrl - The path to a custom close image

Code:

<%-- ScriptManager control manages client script for AJAX enabled ASP.NET pages.This enables partial-page rendering and Web-service calls.You have to used this if you want to use ajax control--%>

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

<%--Add the ValidatorCalloutExtender and some control--%>

<cc1:ValidatorCalloutExtender ID="ValidatorCalloutExtender1" runat="server" TargetControlID="RequiredFieldValidator1">

</cc1:ValidatorCalloutExtender>

 

<cc1:ValidatorCalloutExtender ID="ValidatorCalloutExtender2" runat="server" TargetControlID="RequiredFieldValidator2">

</cc1:ValidatorCalloutExtender>

 

<asp:Label ID="Label1" runat="server" Text=" Name"></asp:Label>

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Enter your name" ControlToValidate="TextBox1" Display="None"></asp:RequiredFieldValidator>

<br />

<asp:Label ID="Label2" runat="server" Text="Phone number"></asp:Label>

<asp:TextBox ID="TextBox2" runat="server" MaxLength="10"></asp:TextBox>

<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="Enter you phone number" Display="None"

ControlToValidate="TextBox2"> </asp:RequiredFieldValidator>

</div>

<p>

<asp:Button ID="Button1" runat="server" Text="Submit" onclick="Button1_Click" />

</p>

<p>&nbsp;</p>

<asp:Label ID="Label3" runat="server"></asp:Label>

Display message of RequiredFieldValidator should be "None"( Display="None")

Run the project

AjaxControl Toolkit ValidatorCalloutExtender Control in ASP.Net

AjaxControl Toolkit ValidatorCalloutExtender Control in ASP.Net

When you click Submit button then error message will show

 

When you enter Name and click button then error message will show for second Textbox

AjaxControl Toolkit ValidatorCalloutExtender Control in ASP.Net

Enter Name and phone number and click Submit button then message will show in Label

AjaxControl Toolkit ValidatorCalloutExtender Control in ASP.Net
















Recent Activities

Don't want to miss updates? Please click the below button!