I think the ValidatorCalloutExtender from the AJAX Control Toolkit is a very nice control. For those who don’t know the control the ValidatorCallout is an ASP.NET AJAX extender that enhances the functionality of existing ASP.NET validators (text taken from the sample on the AJAX Control Toolkit sample site): http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/ValidatorCallout/ValidatorCallout.aspx
But I don’t think the default styling of the ValidatorCallout is very nice:
Fortunately it is very easy to change the basic styling. As the sample shows we can change the border and background color by specifying our own custom style:
.customvalidatorcallout div, .customvalidatorcallout td { border:solid 1px red; background-color:#fff; }
And we can change the “highlight” css class to this:
.highlight { background-color:red; }
And change the “WarningIconImageUrl” and “CloseImageUrl" to our own images. Then we can get a ValidatorCallout that looks something like this:
Off course you could change the colors to something that match you site.
And we can even use some of the new stylesheet features like rounded corners and shadow:
.customvalidatorcallout div, .customvalidatorcallout td { border:solid 1px red; background-color:#fff; }
.customvalidatorcallout .ajax__validatorcallout_error_message_cell {font-size:12px;padding-top:10px;padding-bottom:10px;color:Red;-moz-box-shadow: 2px 2px 2px gray;-webkit-box-shadow: 2px 2px 2px gray;box-shadow: 2px 2px 2px gray;}
.customvalidatorcallout .ajax__validatorcallout_close_button_cell {padding:2px;-moz-border-radius-topright:5px;-moz-border-radius-bottomright:5px;border-top-right-radius:5px;border-bottom-right-radius:5px;-moz-box-shadow: 2px 2px 2px gray;-webkit-box-shadow: 2px 2px 2px gray;box-shadow: 2px 2px 2px gray;}
.customvalidatorcallout .ajax__validatorcallout_icon_cell { padding-top:7px; -moz-border-radius-topleft:5px;-moz-border-radius-bottomleft:5px;border-top-left-radius:5px;border-bottom-left-radius:5px;-moz-box-shadow: 2px 2px 2px gray;-webkit-box-shadow: 2px 2px 2px gray;box-shadow: 2px 2px 2px gray;}
.customvalidatorcallout .ajax__validatorcallout_close_button_cell .ajax__validatorcallout_innerdiv {border:none !important; text-align:center;width:24px;padding:0px 0px 2px 2px;cursor:pointer;}
.customvalidatorcallout .ajax__validatorcallout_close_button_cell .ajax__validatorcallout_innerdiv img { border:1px solid orange; background-color:Red; }
.customvalidatorcallout .ajax__validatorcallout_close_button_cell .ajax__validatorcallout_innerdiv img:hover { border:1px solid gold; }
And we will now have a ValidatorCallout that looks like this in the newest browsers:
And in older browsers it would just look like this:
Here is some other useful information about the ValidatorCallout: You can specify the PopupPosition of the callout. So if your form is place in the right side of the browser window then you can specify that the callout should appear to the left of form fields or above or below.
The ValidatorCallout also supports Skinning so a good way to implement this design on all ValidatorCallout’s on a complete site is to create a ValidatorCalloutExtender.skin file in the Themes folder where we specify the CssClass, HighlightCssClass, WarningIconImageUrl and CloseImageUrl.
I have included a sample with a ValidatorCalloutExtender.skin file and the above styling and samples of the PopupPosition:
http://sundgaard.dk/ValidatorCallout/ValidatorCallout_03.zip
The sample has been tested in IE9 (beta), Firefox and Chrome.
The warning icon in the sample is from this icon collection: http://dryicons.com/free-icons/preview/classy-icons-set/
