Set a Validator's Display to 'None' for the ValidatorCalloutExtender

If you look at Figure 15-1 in ASP.NET 3.5 For Dummies, you'll notice that there's an almost-hidden question mark (?) behind the AJAX Control Kit's ValidatorCallout control. The arrow in the picture points to the mistake (bug) in the book.

At the time I took the screenshot, I couldn't figure out how to get rid of the underlying validator's error message text. I left the question mark with the intention of getting back to it but I never did.

I figured out the problem by the time I shipped the book's source code...

The trick is to set the validator control's Display property to 'None' so the error text doesn't appear. However, the control kit's callout still picks up the text and uses it. I know it seems obvious, but I was just implementing the same validation for a client's application and had trouble recalling the technique.

So, here's the code to remind myself and anyone else how to deal with the built-in validator and the ValidatorCalloutExtender at the same time:

<asp:TextBox CssClass="TextBox" Width="200px" ID="txtUserName" 
    runat="server" TabIndex="1">
</asp:TextBox>
<asp:RequiredFieldValidator ID="rqdUserName" runat="server" 
    ErrorMessage="The user ID (an email address) is required." 
    ControlToValidate="txtUserName" Display="None" >
</asp:RequiredFieldValidator> 
<cc1:ValidatorCalloutExtender ID="ValidatorCalloutExtender1" runat="server" 
    TargetControlID="rqdUserName">
</cc1:ValidatorCalloutExtender>