textbox background color=red on validation failed? : The Official Microsoft ASP.NET Forums

Reply

nisarkhan

Contributor

2402 Points

textbox background color=red on validation failed?

Apr 27, 2009 02:35 AM|LINK

i have a TextBox, RequiredFieldValidator and ValidationSummary control, if i have any errors i want the textbox background color to be in RED but remember i'm using ValidationSummary ShowMessageBox="True" ShowSummary="False"

here is my code:

1    <head runat="server">
2        <title>Untitled Page</title>
3
4          <script type="text/javascript">
5
6        function ChangeBackground() {
7          window.event.srcElement.style.background = "yellow";
8        }
9
10       function RestoreBackground() {
11   window.event.srcElement.style.background = "#FFFFFF"; 12       }
13
14       function CheckKey() {
15
16         alert("The key code is" + window.event.keyCode);
17
18       }
19
20   </script>
21
22   </head>
23   <body>
24       <form id="Form1" runat="server">
25       <div>
26
27           <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
28           <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
29               ControlToValidate="TextBox1" Display="Dynamic"
30               ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>
31           <br />
32           <br />
33           <asp:DropDownList ID="DropDownList1" runat="server" onmouseover="ChangeBackground();"
34         onmouseout="RestoreBackground();" >
35               <asp:ListItem Value="1">1</asp:ListItem>
36               <asp:ListItem Value="2">2</asp:ListItem>
37               <asp:ListItem>3</asp:ListItem>
38                           <asp:ListItem></asp:ListItem>
39           </asp:DropDownList>
40           <asp:ValidationSummary ID="ValidationSummary1" runat="server"
41               ShowMessageBox="True" ShowSummary="False" />
42
43       </div>
44
45       <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button"     />
46       </form>
47   </body>
48   </html>

protected void Page_Load(object sender, EventArgs e)
    {
        TextBox1.Attributes.Add("onmouseover", "ChangeBackground();");
        TextBox1.Attributes.Add("onmouseout", "RestoreBackground();");
    }


    protected void Button1_Click(object sender, EventArgs e)
    {
    }

Its all about coding!
--------------------------
Don't forget to click "Mark as Answer" on the post(s) that helped you.

Reply

Sayre

Participant

1441 Points

373 Posts

Re: textbox background color=red on validation failed?

Apr 27, 2009 02:45 AM|LINK

Hi, you can setup your textbox after checking or click your button to change the textbox background.

Hope This One Can Help.
Thanks

To Be Happy Is To Be YourSelf

codeincsharp.blogspot.com

Reply

budugu

All-Star

41108 Points

6019 Posts

Re: textbox background color=red on validation failed?

Apr 27, 2009 02:47 AM|LINK

Check this..

http://codeasp.net/blogs/vijjendra/microsoft.net/58/change-the-color-of-the-textbox

Vijay Kodali || My Blog

"Don't be afraid to be wrong; otherwise you'll never be right."

Reply

Gregale.net

Participant

1268 Points

312 Posts

Re: textbox background color=red on validation failed?

Apr 27, 2009 02:55 AM|LINK

Hi,

Have you tried the background property?

<asp:RequiredFieldValidator ID="rfvEmailConfirm" runat="server"
Display="Dynamic" ControlToValidate="txtEmailConfirm" BackColor="Red"
ErrorMessage="You Must Provide a Confirmation Email Address." />

However, for the best practice, refer to page 169, MCPD Exam 70-547, here is the note:

■ ForeColor Use this property to set the color of the inline error message when validation
fails.
NOTE Do not rely solely on colors and fonts to report errors
It is a common mistake among new Web developers to rely exclusively on attributes such as
color to draw attention to errors. However, there are several good reasons for providing multiple
visual aids to indicate errors. Changing the color or the font size will likely not reach
your entire audience. Much of the population is colorblind. There are also users who are
visually impaired and who use screen readers. A best practice is to use additional cues to
indicate problems, so you are using several attributes in combination. For example, placing
an asterisk or an exclamation point next to a field that is experiencing a data validation issue
draws attention to that field. This is true for users who are visually impaired as well because
screen readers will identify those fields as the screen is read.

Gud luck!

gregale.net

Reply

shahed.kazi

All-Star

17953 Points

3635 Posts

Re: textbox background color=red on validation failed?

Apr 27, 2009 03:08 AM|LINK

On page load,

if (!Page.IsValid)

{ TextBox1.BackColor = System.Drawing.Color.Red; }

Shahed Kazi [MCTS, SCJP] [Microsoft Community Contributor 2011]
.NET World |Captcha Control

Reply

nisarkhan

Contributor

2402 Points

1472 Posts

Re: textbox background color=red on validation failed?

Apr 27, 2009 11:23 AM|LINK

Gregale.net

Hi,

Have you tried the background property?

<asp:RequiredFieldValidator ID="rfvEmailConfirm" runat="server"
Display="Dynamic" ControlToValidate="txtEmailConfirm" BackColor="Red"
ErrorMessage="You Must Provide a Confirmation Email Address." />

does not work, it changes the RFV backcolor to red not the textbox.

Its all about coding!
--------------------------
Don't forget to click "Mark as Answer" on the post(s) that helped you.

Reply

nisarkhan

Contributor

2402 Points

1472 Posts

Re: textbox background color=red on validation failed?

Apr 27, 2009 11:26 AM|LINK

budugu

Check this..

http://codeasp.net/blogs/vijjendra/microsoft.net/58/change-the-color-of-the-textbox

my example is one of many controls i will be using so i need a way to have a solution simple and easy but the above link is using a RFV plus customValidator to change the textbox color

can't be done with RFV? without having to write another script for color change?

Its all about coding!
--------------------------
Don't forget to click "Mark as Answer" on the post(s) that helped you.

Reply

nisarkhan

Contributor

2402 Points

1472 Posts

Re: textbox background color=red on validation failed?

Apr 27, 2009 11:30 AM|LINK

shahed.kazi

On page load,

if (!Page.IsValid)

{ TextBox1.BackColor = System.Drawing.Color.Red; }

it works great very first time when the page loads and after i click the button it never go to page_load because its doing the client validation

so let says:

when the page loads the back-color is red

and than i click on the button without entering any text in the text-box than the validation summary pop-up window display but the color of the text-box not changed.

i need a way to change the back-color when the validation fails.

Its all about coding!
--------------------------
Don't forget to click "Mark as Answer" on the post(s) that helped you.

Reply

Gary yang - ...

All-Star

25901 Points

2588 Posts

Re: textbox background color=red on validation failed?

Apr 30, 2009 05:58 AM|LINK

nisarkhan
i need a way to change the back-color when the validation fails.

Based on my experience, I suggest you override the WebForm_OnSubmit JavaScript function to fix your requirement. Please try to refer to the following code:

This code will demonstrate that the backcolor of this TextBox will be changed when the page validate failure. When you click 'OK' on the pop-up window, the backcolor of this TextBox will be changed to red.

<html >
<head id="Head1" runat="server">
<title>Update</title>
     <script type="text/javascript">
     </script>
</head>
<body >
 <form id="form1" runat="server">
 <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
 <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="RequiredFieldValidator"
  ControlToValidate="TextBox1"></asp:RequiredFieldValidator>
 <asp:ValidationSummary ID="ValidationSummary1" runat="server"
     ShowMessageBox="True" ShowSummary="false" />
     <script type="text/javascript">
         //<![CDATA[
         function WebForm_OnSubmit() {
             if (typeof (ValidatorOnSubmit) =="function" && ValidatorOnSubmit() == false) {
                 document.getElementById("TextBox1").style.backgroundColor="red";
                 return false;
             }
             else {
                 return true;
             }
         }
         //]]>
</script>
 <asp:Button ID="Button1" runat="server" Text="Button" />
  </form>
</body>
</html>

Gary yang - MSFT
Microsoft Online Community Support

Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Edited by nisarkhan on Apr 30, 2009 02:47 PM
Edited by nisarkhan on Apr 30, 2009 02:55 PM
Marked as answer by Gary yang - MSFT on May 04, 2009 02:15 AM

Reply

nisarkhan

Contributor

2402 Points

1472 Posts

Re: textbox background color=red on validation failed?

Apr 30, 2009 02:48 PM|LINK

Gary yang: thanks one last question, how can i make that js code in a seprate file? i tried to put the code in sepate .js file but does not work and yes i have reference of my js on my .aspx page

Its all about coding!
--------------------------
Don't forget to click "Mark as Answer" on the post(s) that helped you.

Edited by nisarkhan on Apr 30, 2009 02:55 PM

textbox background color=red on validation failed? RSS

12 replies

nisarkhan

textbox background color=red on validation failed?

Sayre

Re: textbox background color=red on validation failed?

budugu

Re: textbox background color=red on validation failed?

Gregale.net

Re: textbox background color=red on validation failed?

shahed.kazi

Re: textbox background color=red on validation failed?

nisarkhan

Re: textbox background color=red on validation failed?

Gregale.net

nisarkhan

Re: textbox background color=red on validation failed?

budugu

nisarkhan

Re: textbox background color=red on validation failed?

shahed.kazi

Gary yang - ...

Re: textbox background color=red on validation failed?

nisarkhan

nisarkhan

Re: textbox background color=red on validation failed?

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft