By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,963 Members | 1,279 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,963 IT Pros & Developers. It's quick & easy.

RequiredFieldValidator - changing font color of label?

P: n/a
Hello,

I have a simple form with some input boxes. After validation if one
fails, then I would like to at the top of the page say something like
"The following fields in red are required" and then change the label in
front of the textbox or dropdown list to red... is this possible with
asp.net? It seems you can only put a RequiredFieldValidator on the
page, and if it fails validation then that text is displayed... ?

Thanks

-ed
Nov 18 '05 #1
Share this Question
Share on Google+
7 Replies


P: n/a
Hi Ed,

Wouldn't the ValidationSummary control do what you need?

<asp:ValidationSummary id="ValidationSummary1" runat="server"
DisplayMode="SingleParagraph" HeaderText="The following fields in red are
required"></asp:ValidationSummary></P>

Ken
Microsoft MVP [ASP.NET]

"Ed West" <We**@westlake.com> wrote in message
news:uD****************@tk2msftngp13.phx.gbl...
Hello,

I have a simple form with some input boxes. After validation if one
fails, then I would like to at the top of the page say something like "The
following fields in red are required" and then change the label in front
of the textbox or dropdown list to red... is this possible with asp.net?
It seems you can only put a RequiredFieldValidator on the page, and if it
fails validation then that text is displayed... ?

Thanks

-ed


Nov 18 '05 #2

P: n/a

Ken,

Thanks for the response.

No, it does not do what I want, it displays the names of the fields in
the ValidationSummary. I want it just to say "The fields in red are
required". Also, a RequiredFieldValidator does not do exactly what I
want either. I just want to change the label in front of the input
field to red, instead of having a separate space to display the error
message. Is there a way to do this or do I need a label and then the
required field validator which shows an error message?

Any ideas?

right now I put my own validation in Form_Load when IsPostBack is true.
I check the value of each textbox, if it is empty then i change the
cssClass of the label in front (to red text), and then change the label
at the top to "The following fields in red are required".

thanks,

-ed
Ken Cox [Microsoft MVP] wrote:
Hi Ed,

Wouldn't the ValidationSummary control do what you need?

<asp:ValidationSummary id="ValidationSummary1" runat="server"
DisplayMode="SingleParagraph" HeaderText="The following fields in red
are required"></asp:ValidationSummary></P>

Ken
Microsoft MVP [ASP.NET]

"Ed West" <We**@westlake.com> wrote in message
news:uD****************@tk2msftngp13.phx.gbl...
Hello,

I have a simple form with some input boxes. After validation if one
fails, then I would like to at the top of the page say something like
"The following fields in red are required" and then change the label
in front of the textbox or dropdown list to red... is this possible
with asp.net? It seems you can only put a RequiredFieldValidator on
the page, and if it fails validation then that text is displayed... ?

Thanks

-ed


Nov 18 '05 #3

P: n/a
I do exactly this all the time with ValidationSummary and the various
Validation controls. I hope that this gets you started:

<%@ Control Language="c#" Codebehind="____.ascx.cs"
AutoEventWireup="false" Inherits="______" %>
....
<tr><td class="RequiredField">*Name
<asp:RequiredFieldValidator
ControlToValidate="tbName"
Display="Static"
ErrorMessage="Enter the Name"
EnableClientScript="False"
runat="server">
<img src='/images/common/WarningIcon.gif'>
</asp:RequiredFieldValidator>
</td><td><asp:TextBox id="tbName" runat="Server" MaxLength="100"/></td></tr>
<tr><td align="center" colspan="2">
<!-- Validation summary -->
<asp:ValidationSummary
DisplayMode="BulletList"
Align="Center" Class="FormErrors"
runat="server"
HeaderText="Correct the following errors"
ForeColor="White"/>
</td></tr>

A couple of things to note:
1. You should set the ErrorMessage property of your Validation control,
such as what I've done
2. You can also specify a static body which will be displayed at the
location that you wish. In the RequiredFieldValidator example above, the
WarningIcon.gif will display if the validation control determines that
there's an error
3. Display="Static" means that the .NET framework will allocate space on
the page for the warning icon image even though it is not displayed, so
that, when it is actually displayed it does not alter the page layout in
any way (it seems at least)
3. Note that the ValidationSummary control has a Class attribute. Here
is my CSS for that. The CSS is not cleaned up, but in any case it
renders all error text in bold white, with a bright red background.
Perfect for those colour blind people :P :

..FormErrors {
Color: white;
Background: red;
Font-Family: Arial, Helvetica, sans-serif;
FONT-SIZE: 9pt;
Font-Weight: bold;
}

..FormErrors ul {
Padding: 0;
Margin: 0;
Color: white;
Font-weight: bold;
List-Style: disc;
List-Style-Position: inside;
Border: none;
}

..MainBody .FormErrors ul li {
Color: white;
}

Shan Plourde
Ed West wrote:

Ken,

Thanks for the response.

No, it does not do what I want, it displays the names of the fields in
the ValidationSummary. I want it just to say "The fields in red are
required". Also, a RequiredFieldValidator does not do exactly what I
want either. I just want to change the label in front of the input
field to red, instead of having a separate space to display the error
message. Is there a way to do this or do I need a label and then the
required field validator which shows an error message?

Any ideas?

right now I put my own validation in Form_Load when IsPostBack is
true. I check the value of each textbox, if it is empty then i change
the cssClass of the label in front (to red text), and then change the
label at the top to "The following fields in red are required".

thanks,

-ed
Ken Cox [Microsoft MVP] wrote:
Hi Ed,

Wouldn't the ValidationSummary control do what you need?

<asp:ValidationSummary id="ValidationSummary1" runat="server"
DisplayMode="SingleParagraph" HeaderText="The following fields in red
are required"></asp:ValidationSummary></P>

Ken
Microsoft MVP [ASP.NET]

"Ed West" <We**@westlake.com> wrote in message
news:uD****************@tk2msftngp13.phx.gbl...
Hello,

I have a simple form with some input boxes. After validation if one
fails, then I would like to at the top of the page say something
like "The following fields in red are required" and then change the
label in front of the textbox or dropdown list to red... is this
possible with asp.net? It seems you can only put a
RequiredFieldValidator on the page, and if it fails validation then
that text is displayed... ?

Thanks

-ed



Nov 18 '05 #4

P: n/a
Hi Ed,

I rewrote ASP.NET validation to do a lot more than what Microsoft ships.
With "Professional Validation And More"
(http://www.peterblum.com/vam/home.aspx), you can do exactly what you
described: setting the label to a different color and showing a hint at the
top to tell what to do. Download the free trial version to look at it. Here
are the specifics of how to do this:

1. Hide the RequiredTextValidator by setting the Display property to None in
the ErrorFormatter property. (You can do something similar with MS
Validators.)
2. Add my ValidationSummary control. Set the HeaderText to "The fields in
red are required". Set the DisplayMode property to "None". This will make it
only show the HeaderText.
3. On the RequiredTextValidator, use the HiliteFields property to identify
the associated Label control that you want to turn red. Follow the steps on
page 95 of the User's Guide to establish the style sheet that will be
applied to the Label.

The HiliteFields feature is only one of the ways to get the user's attention
Professional Validation And More. You can also:
* Set focus to the field with error
* Show an alert when the user enters an error
* Change the style of the field with the error itself
* Show a small image that takes up very little screen room. You can either
have it popup an alert or a tooltip with the error message. You can even
have it blink the image.

--- Peter Blum
www.PeterBlum.com
Email: PL****@PeterBlum.com
Creator of "Professional Validation And More" at
http://www.peterblum.com/vam/home.aspx

"Ed West" <We**@westlake.com> wrote in message
news:uM*************@tk2msftngp13.phx.gbl...

Ken,

Thanks for the response.

No, it does not do what I want, it displays the names of the fields in
the ValidationSummary. I want it just to say "The fields in red are
required". Also, a RequiredFieldValidator does not do exactly what I
want either. I just want to change the label in front of the input
field to red, instead of having a separate space to display the error
message. Is there a way to do this or do I need a label and then the
required field validator which shows an error message?

Any ideas?

right now I put my own validation in Form_Load when IsPostBack is true.
I check the value of each textbox, if it is empty then i change the
cssClass of the label in front (to red text), and then change the label
at the top to "The following fields in red are required".

thanks,

-ed
Ken Cox [Microsoft MVP] wrote:
Hi Ed,

Wouldn't the ValidationSummary control do what you need?

<asp:ValidationSummary id="ValidationSummary1" runat="server"
DisplayMode="SingleParagraph" HeaderText="The following fields in red
are required"></asp:ValidationSummary></P>

Ken
Microsoft MVP [ASP.NET]

"Ed West" <We**@westlake.com> wrote in message
news:uD****************@tk2msftngp13.phx.gbl...
Hello,

I have a simple form with some input boxes. After validation if one
fails, then I would like to at the top of the page say something like
"The following fields in red are required" and then change the label
in front of the textbox or dropdown list to red... is this possible
with asp.net? It seems you can only put a RequiredFieldValidator on
the page, and if it fails validation then that text is displayed... ?

Thanks

-ed


Nov 18 '05 #5

P: n/a

Hi Shan,

thanks for the reply but your example does not do what I was asking

(1) The validation summary lists the offending fields. I do not want
the offending fields listed there.

(2) I want the offending field's font color to change. All you are
doing is adding a warning box.

Is there any way to do this without writing code? (Not that I mind, but
I would like to use Microsoft's built in stufff, but once again it looks
like it is useless) Or do I have to buy that guy who posted's component?

thanks

-dan


Shan Plourde wrote:
I do exactly this all the time with ValidationSummary and the various
Validation controls. I hope that this gets you started:

<%@ Control Language="c#" Codebehind="____.ascx.cs"
AutoEventWireup="false" Inherits="______" %>
...
<tr><td class="RequiredField">*Name
<asp:RequiredFieldValidator
ControlToValidate="tbName"
Display="Static"
ErrorMessage="Enter the Name"
EnableClientScript="False"
runat="server">
<img src='/images/common/WarningIcon.gif'>
</asp:RequiredFieldValidator>
</td><td><asp:TextBox id="tbName" runat="Server"
MaxLength="100"/></td></tr>
<tr><td align="center" colspan="2">
<!-- Validation summary -->
<asp:ValidationSummary
DisplayMode="BulletList"
Align="Center" Class="FormErrors"
runat="server"
HeaderText="Correct the following errors"
ForeColor="White"/>
</td></tr>

A couple of things to note:
1. You should set the ErrorMessage property of your Validation control,
such as what I've done
2. You can also specify a static body which will be displayed at the
location that you wish. In the RequiredFieldValidator example above, the
WarningIcon.gif will display if the validation control determines that
there's an error
3. Display="Static" means that the .NET framework will allocate space on
the page for the warning icon image even though it is not displayed, so
that, when it is actually displayed it does not alter the page layout in
any way (it seems at least)
3. Note that the ValidationSummary control has a Class attribute. Here
is my CSS for that. The CSS is not cleaned up, but in any case it
renders all error text in bold white, with a bright red background.
Perfect for those colour blind people :P :

.FormErrors {
Color: white;
Background: red;
Font-Family: Arial, Helvetica, sans-serif;
FONT-SIZE: 9pt;
Font-Weight: bold;
}
.FormErrors ul {
Padding: 0;
Margin: 0;
Color: white;
Font-weight: bold;
List-Style: disc;
List-Style-Position: inside;
Border: none;
}
.MainBody .FormErrors ul li {
Color: white;
}

Shan Plourde
Ed West wrote:

Nov 18 '05 #6

P: n/a
Yes you're right, I am doing 2 things in my example:
1. Listing the offending fields
2. Displaying an image next to the label (a warning icon image) which
makes the label stand out on the page

So my approach is different from what you're trying to do. Out of the
box I don't think you can do this without writing code. You could
possibly extend the existing validation/UI model, perhaps such as:
<RequiredFieldValidator
ValidationLabel="<your label name>"
ValidationLabelStyle="<your style>"
/RequiredFieldValidator>

This way you would not have to then do any programmatic intervention. Of
course, you can always buy that other guys stuff if that's too much work :P

Shan Plourde
Ed West wrote:

Hi Shan,

thanks for the reply but your example does not do what I was asking

(1) The validation summary lists the offending fields. I do not want
the offending fields listed there.

(2) I want the offending field's font color to change. All you are
doing is adding a warning box.

Is there any way to do this without writing code? (Not that I mind,
but I would like to use Microsoft's built in stufff, but once again it
looks like it is useless) Or do I have to buy that guy who posted's
component?

thanks

-dan


Shan Plourde wrote:
I do exactly this all the time with ValidationSummary and the various
Validation controls. I hope that this gets you started:

<%@ Control Language="c#" Codebehind="____.ascx.cs"
AutoEventWireup="false" Inherits="______" %>
...
<tr><td class="RequiredField">*Name
<asp:RequiredFieldValidator
ControlToValidate="tbName"
Display="Static"
ErrorMessage="Enter the Name"
EnableClientScript="False"
runat="server">
<img src='/images/common/WarningIcon.gif'>
</asp:RequiredFieldValidator>
</td><td><asp:TextBox id="tbName" runat="Server"
MaxLength="100"/></td></tr>
<tr><td align="center" colspan="2">
<!-- Validation summary -->
<asp:ValidationSummary
DisplayMode="BulletList"
Align="Center" Class="FormErrors"
runat="server"
HeaderText="Correct the following errors"
ForeColor="White"/>
</td></tr>

A couple of things to note:
1. You should set the ErrorMessage property of your Validation
control, such as what I've done
2. You can also specify a static body which will be displayed at the
location that you wish. In the RequiredFieldValidator example above,
the WarningIcon.gif will display if the validation control determines
that there's an error
3. Display="Static" means that the .NET framework will allocate space
on the page for the warning icon image even though it is not
displayed, so that, when it is actually displayed it does not alter
the page layout in any way (it seems at least)
3. Note that the ValidationSummary control has a Class attribute.
Here is my CSS for that. The CSS is not cleaned up, but in any case
it renders all error text in bold white, with a bright red
background. Perfect for those colour blind people :P :

.FormErrors {
Color: white;
Background: red;
Font-Family: Arial, Helvetica, sans-serif;
FONT-SIZE: 9pt;
Font-Weight: bold;
}
.FormErrors ul {
Padding: 0;
Margin: 0;
Color: white;
Font-weight: bold;
List-Style: disc;
List-Style-Position: inside;
Border: none;
}
.MainBody .FormErrors ul li {
Color: white;
}

Shan Plourde
Ed West wrote:


Nov 18 '05 #7

P: n/a

Shan,

OK, thanks for your help. I just wanted to exhaust all possibilities
within .net before I wrote my own or bought someone else's product.

Regards,

ed

Shan Plourde wrote:
Yes you're right, I am doing 2 things in my example:
1. Listing the offending fields
2. Displaying an image next to the label (a warning icon image) which
makes the label stand out on the page

So my approach is different from what you're trying to do. Out of the
box I don't think you can do this without writing code. You could
possibly extend the existing validation/UI model, perhaps such as:
<RequiredFieldValidator
ValidationLabel="<your label name>"
ValidationLabelStyle="<your style>"
/RequiredFieldValidator>

This way you would not have to then do any programmatic intervention. Of
course, you can always buy that other guys stuff if that's too much work :P

Shan Plourde

Nov 18 '05 #8

This discussion thread is closed

Replies have been disabled for this discussion.