Click here to Skip to main content
Click here to Skip to main content
Go to top

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.

emailinvalid.GIF

lastnamerequired.GIF

Introduction

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.

Background

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:

addextender.GIF

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:

forattribute.GIF

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." 
   validationgroup="test"></asp:requiredfieldvalidator>
<asp:requiredfieldvalidator id="RequiredFieldValidator2" runat="server" 
   controltovalidate="tbxLastname" display="Dynamic" 
   errormessage="Last name is required." 
   validationgroup="test"></asp:requiredfieldvalidator>
<br />
<library:label id="Label2" runat="server" for="tbxEmail" text="Email:" />
<asp:textbox id="tbxEmail" runat="server" 
   validationgroup="test"></asp:textbox><asp:regularexpressionvalidator
   id="RegularExpressionValidator1" runat="server" 
   errormessage="Email is invalid." 
   controltovalidate="tbxEmail" display="Dynamic" 
   validationexpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" 
   validationgroup="test"></asp:regularexpressionvalidator>
<br />
<asp:linkbutton id="lbnSubmit" runat="server" 
   validationgroup="test">Submit</asp:linkbutton>
</asp:panel>
<library:clientvalidationbehavior id="pnlTest_ClientValidationBehavior" 
   runat="server" invalidcolor="Red" targetcontrolid="pnlTest" 
   validationgroup="test" validcolor="Black" />

Conclusion

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!

History

  • 05/02/2008 - First edition.

License

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

Share

About the Author

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

Comments and Discussions

 
Question[My vote of 1] Error: The Web Server Could Not Find the Requested Resource Pinmembermsdevtech13-Dec-12 3:48 
GeneralQuestion about callsout PinmemberOzkar521-Jan-10 10:53 
Questionhow can it work when i use CustomValidator? Pinmemberamoxoo21-Oct-09 20:56 
Questionclick twice on the submit button? PinmemberMario Drolet12-Sep-09 2:51 
GeneralIs there any possible ajax livevalidation for textbox ,combo box in asp.net visual studio 2005 Pinmembersathiyarajg17-Jun-09 19:19 
GeneralTry this [modified] Pinmembercodemobile24-Oct-08 1:09 
GeneralRe: Try this PinmemberEnoch Tsai24-Oct-08 4:26 
Questionhow Can I Custumize The Alingment Of Validator ? PinmemberFeras Mazen Taleb21-Jun-08 23:53 
AnswerRe: how Can I Custumize The Alingment Of Validator ? PinmemberEnoch Tsai23-Jun-08 4:41 
Questioncan this work in VS 2005? Pinmembertgsmail3-Jun-08 15:40 
AnswerRe: can this work in VS 2005? PinmemberEnoch Tsai4-Jun-08 8:53 

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

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

| Advertise | Privacy | Mobile
Web04 | 2.8.140916.1 | Last Updated 2 May 2008
Article Copyright 2008 by Enoch Tsai
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid