Back in September last year (2008), I posted a demo about Username Availability Validator Control. This control developed by the community on a contest initiated by Dave Ward on August 2008 as I remember. At that time the control was in beta.

On October 2008 the control was released to public on its first version. And finally I wrote a a very simple documentation on the project Wiki.

In this post I am going to update my previous demo as well as provide new feature on the control which is SuccessMessage property to be displayed if the Username is available. This update is not available so far on project at CodePlex. This is a private update which I provided on this post only. [View Demo]

In my previous post about this subject someone asked how to apply styles similar to the ones provided by Dave himself on his post "ASP.NET AJAX username availability check". It was pretty simple to apply it using Style Sheets. Here is the updated markup of the control to use CssClass property:

<encosia:UsernameAvailabilityValidator 
	ControlToValidate="UserName"
	ValidationGroup="CreateUserWizard"
	CssClass="taken"
	ErrorMessage="Taken"
	KeyPressDelay="500"
	MinimumLength="5" 
	ServiceMethod="IsUsernameAvailable"
	ServicePath="~/MembershipService.asmx"
	ValidateOnKeyPress="True"
	Display="Static"
	runat="server"/>

.taken
{
    padding-left:22px;
    padding-bottom:3px;
    background-repeat:no-repeat;
    background-image: url(../img/taken.gif);
    color:Red;
}

As I mentioned earlier, I updated the control to implement SuccessMessage property with SuccessCssClass. We discussed SuccessMessage & SuccessCssClass on the project discussion but they were taken off before the release of the first version. And so I decided to try it personally and gain feedback before merge it to the project original source code. I had to override the basic Render method of the server control to have more control over the rendered HTML and provide another span to display SuccessMessage and apply SuccessCssClass

You can view the demo to see this working in real life example.

<encosia:UsernameAvailabilityValidator 
	ControlToValidate="UserName"
	ValidationGroup="CreateUserWizard"
	CssClass="taken"
	SuccessCssClass="available"
	Text="Taken"
	ErrorMessage="Taken"
	SuccessMessage="Available"
	KeyPressDelay="500"
	MinimumLength="5" 
	ServiceMethod="IsUsernameAvailable"
	ServicePath="~/MembershipService.asmx"
	ValidateOnKeyPress="True"
	Display="Static"
	runat="server"/>

You can download the full solution to explore the code. Hopefully soon it will be added to the original project source control. Mainly I updated both Server Control & Client Control to manage showing and hiding ErrorMessage or SuccessMessage.