Click here to Skip to main content
13,199,311 members (59,593 online)
Click here to Skip to main content
Add your own
alternative version


38 bookmarked
Posted 2 May 2008

ASP.NET client validation callout extender

, 2 May 2008
Rate this:
Please Sign up or sign in to vote.
An extender that "hacks' into .NET 3.5 client validation without tempering its base structure, to provide a rich and interactive client validation enhancement, with visual effects from the jQuery library.




The purpose of creating this ASP.NET AJAX Extender Control is to enrich client validation behavior based on the .NET client validation mechanism. This practice also shows you how easy it can be to create face in and out behavior with a "light-weight" JavaScript library, jQuery.


Probably, many of you know about the ValidatorCallout control in the ASP.NET AJAX Control Toolkit. This extender that I created is based on it, with a twist. Although the callout behavior is nice and much more pleasant than the standard validation output, it can be improved with some help. ValidatorCallout is required for each validator control, and it is not able to change the font color of the associated label or control with which to validate. It is always frustrating that when placing validation summary either on the top or at the bottom of the form, it is difficult to find where it went wrong, especially when the form has a lot of inputs. It would be much better to invalidate (which means to turn red or any color other than black) the label and pop up the error message, as the invalid control gets the focus.

ValidatorCallout shows us how to "hack" into .NET client validation, and with this key information, we can achieve the validation behavior we want with some limitations:

  • All input controls must be enclosed in a Panel control. This extender is an extender for the Panel control.
  • Must use the Label control from this library instead of the standard Label from the .NET framework because the standard is rendered as a SPAN element.
  • The UI designer must link a Label with at least one or more input control IDs, with a "," to separate them if it's more than one by specifying it in the "for" attribute.
  • The ScriptManager control is required on the page.

Using the code

The way to use this library is very simple. This control is created as an ASP.NET AJAX Extender, and Visual Studio 2008 provides us a very friendly user interface to add an extender to a control.

First, you need to put a ScriptManager and a Panel on the page. In VS2008, switch the view of the page from source to design mode. Click on the Panel control, and you will see there is an arrow button appearing on the top right corner of the Panel control. Click on that, and there will be a popup window that has a command to allow you to add an extender to the Panel control.

Like this:


Second, you need to create the input controls along with labels that associate with the inputs, and to link them by specifying the "for" attribute of the Label control. Like this:


Third, put a button on the page and also the validators that you require. It's that simple.

Here is an example:

<asp:panel id="pnlTest" runat="server" cssclass="form">
<library:label id="Label1" runat="server" 

    for="tbxFirstName,tbxLastname" text="Name:" />
<asp:textbox id="tbxFirstName" runat="server" validationgroup="test"></asp:textbox> 
<asp:textbox id="tbxLastname" runat="server" validationgroup="test"></asp:textbox>
<asp:requiredfieldvalidator id="RequiredFieldValidator1" runat="server" 

   controltovalidate="tbxFirstName" display="Dynamic" 

   errormessage="First name is required." 

<asp:requiredfieldvalidator id="RequiredFieldValidator2" runat="server" 

   controltovalidate="tbxLastname" display="Dynamic" 

   errormessage="Last name is required." 

<br />
<library:label id="Label2" runat="server" for="tbxEmail" text="Email:" />
<asp:textbox id="tbxEmail" runat="server" 


   id="RegularExpressionValidator1" runat="server" 

   errormessage="Email is invalid." 

   controltovalidate="tbxEmail" display="Dynamic" 


<br />
<asp:linkbutton id="lbnSubmit" runat="server" 

<library:clientvalidationbehavior id="pnlTest_ClientValidationBehavior" 

   runat="server" invalidcolor="Red" targetcontrolid="pnlTest" 

   validationgroup="test" validcolor="Black" />


If you wish to know more of how it is done, please visit my blog here. If you like this article, please remember to vote. If you have any suggestions, bugs, or enhancements, please share them with me! Thanks!


  • 05/02/2008 - First edition.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Enoch Tsai
Software Developer (Senior) Bibles for America
United States United States
No Biography provided

You may also be interested in...


Comments and Discussions

Question[My vote of 1] Error: The Web Server Could Not Find the Requested Resource Pin
msdevtech13-Dec-12 3:48
membermsdevtech13-Dec-12 3:48 
GeneralQuestion about callsout Pin
Ozkar521-Jan-10 10:53
memberOzkar521-Jan-10 10:53 
Questionhow can it work when i use CustomValidator? Pin
amoxoo21-Oct-09 20:56
memberamoxoo21-Oct-09 20:56 
Questionclick twice on the submit button? Pin
Mario Drolet12-Sep-09 2:51
memberMario Drolet12-Sep-09 2:51 
GeneralIs there any possible ajax livevalidation for textbox ,combo box in visual studio 2005 Pin
sathiyarajg17-Jun-09 19:19
membersathiyarajg17-Jun-09 19:19 
GeneralTry this [modified] Pin
codemobile24-Oct-08 1:09
membercodemobile24-Oct-08 1:09 
GeneralRe: Try this Pin
Enoch Tsai24-Oct-08 4:26
memberEnoch Tsai24-Oct-08 4:26 
Questionhow Can I Custumize The Alingment Of Validator ? Pin
Feras Mazen Taleb21-Jun-08 23:53
memberFeras Mazen Taleb21-Jun-08 23:53 
AnswerRe: how Can I Custumize The Alingment Of Validator ? Pin
Enoch Tsai23-Jun-08 4:41
memberEnoch Tsai23-Jun-08 4:41 
Questioncan this work in VS 2005? Pin
tgsmail3-Jun-08 15:40
membertgsmail3-Jun-08 15:40 
AnswerRe: can this work in VS 2005? Pin
Enoch Tsai4-Jun-08 8:53
memberEnoch Tsai4-Jun-08 8:53 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.171020.1 | Last Updated 2 May 2008
Article Copyright 2008 by Enoch Tsai
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid