RequiredFieldValidator - changing font color of label?

[Ed West]

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

 

[Ken Cox [Microsoft MVP]]

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]

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

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]

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

 

[Shan Plourde]

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 :

..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

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

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]

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

 

[Peter Blum]

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: (e-mail address removed)
Creator of "Professional Validation And More" at
http://www.peterblum.com/vam/home.aspx

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

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]

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

 

[Ed West]

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]

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

Shan Plourde

 

[Ed West]

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

 

[chamindasomathilaka]

May be this is too late for a solution.

I have to do the same and what I did was, implemented a custom control inheriting RequiredFiledValidator. Inside the Custom control, I added a CustomValidator control and added Javascript which is to be the client side function for the validator.

Also I implemented a new property in the custom validator to keep the Label control to be change colors on invalid input.