Hi All,
I want to replicate what is done here:
http://www.asp.net/AJAX/AjaxControlToolkit/Samples/ValidatorCallout/ValidatorCallout.aspx
When the submit button is clicked, the 'name' and 'phone number' backgrounds change color...
Any help would be great.
Thanks
Keegan
Hi Keegan,
There is a pretty good sample contained inside the AJAX Control Toolkit's source code. You can find it under SampleWebSite\ValidatorCallout directory. Here is the sample code. Please pay attention to the "Bold" part.
<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"></script><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Untitled Page</title> <style> .validatorCalloutHighlight { background-color: lemonchiffon; } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <table> <tr> <td>Name:</td> <td><asp:TextBox runat="server" ID="NameTextBox" BorderStyle="solid" BorderWidth="1px" BorderColor="#a9a9a9" /></td> </tr> <tr> <td>Phone Number:</td> <td><asp:TextBox runat="server" ID="PhoneNumberTextBox" BorderStyle="solid" BorderWidth="1px" BorderColor="#a9a9a9" /></td> </tr> </table> <br /> <asp:RequiredFieldValidator runat="server" ID="NReq" ControlToValidate="NameTextBox" Display="None" ErrorMessage="b><br />A name is required."> <ajaxToolkit:ValidatorCalloutExtender runat="Server" ID="NReqE" TargetControlID="NReq" HighlightCssClass="validatorCalloutHighlight" /> <asp:RequiredFieldValidator runat="server" ID="PNReq" ControlToValidate="PhoneNumberTextBox" Display="None" ErrorMessage="b><br />A phone number is required.<div style='margin-top:5px;padding:5px;border:1px solid #e9e9e9;background-color:white;'><b>Other Options:</b><br /><a href='javascript:alert("No phone number available in profile.");'>Extract from Profile</a></div>"> <ajaxToolkit:ValidatorCalloutExtender runat="Server" ID="PNReqE" TargetControlID="PNReq" HighlightCssClass="validatorCalloutHighlight" Width="350px" /> <asp:RegularExpressionValidator runat="server" ID="PNRegEx" ControlToValidate="PhoneNumberTextBox" Display="None" ValidationExpression="((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}" ErrorMessage="b><br />Please enter a phone number in the format:<br />(###) ###-####"> <ajaxToolkit:ValidatorCalloutExtender runat="Server" ID="PNReqEx" TargetControlID="PNRegEx" HighlightCssClass="validatorCalloutHighlight" /> <asp:Button ID="Button1" runat="server" Text="Submit"/><br /><br /> </form></body></html>I hope this help.
Best regards,
Jonathan
Hi Jonathan,
Thank you very much for the reply. It pointed me in the right direction:
I created a class in my linked CSS file:.validatorCalloutHighlight{background-color:Red;}
and set the property of myValidatorCalloutExtender to call:HighlightCssClass="validatorCalloutHighlight".
Worked like a charm.
Thanks again.
Keegan
No comments:
Post a Comment