CODEWITHSUNDEEP
asp.netvalidation
Matt Dawdy
Matt Dawdy

Reputation: 19717

ASP.Net Validator Default Style

I'm using several variants of the Validator controls (RequiredFieldValidator, CompareValidator, etc) and am using the CssClass property of the validator. I can see (via Firebug) that the class is being applied, but the validator control itself is adding a style element to it, namely color: red. But I don't want that. I want the control to use the cssclass only.

I know I can override the Forecolor attribute, but I'll have to do that on every validator in the project. And I'd really like to be able to just change my CSS Class in my stylesheet in case we have to change all the error message appearances in the future.

Anyone have any clues how to tell the Validator controls to NOT use their default styles?

Upvotes: 13

Views: 11205

Answers (5)

Eyad Eyadian
Eyad Eyadian

Reputation: 101

Set Forecolor=""

And 

CssClass="your-css-class"

Upvotes: 0

Rich
Rich

Reputation: 15455

You can change the default style of validators using Themes.

  • Right click on the website in Visual Studio
  • Choose "Add ASP.NET Folder"
  • Choose "Themes", name the new folder "DefaultTheme"
  • Create a file called "Controls.skin" in the DefaultTheme folder

Add the following to the Controls.skin file:

<asp:RequiredFieldValidator runat="server" CssClass="validation-error" />
<asp:RangeValidator runat="server" CssClass="validation-error" />
<asp:CompareValidator runat="server" CssClass="validation-error" />
<asp:RegularExpressionValidator runat="server" CssClass="validation-error" />
<asp:CustomValidator runat="server" CssClass="validation-error" />
<asp:ValidationSummary runat="server" CssClass="validation-error" />

Merge the following into your web.config:

<configuration>
    <system.web>
        <pages theme="DefaultTheme" />
    </system.web>
</configuration>

Then you can set whatever colour you want for .validation-error in your CSS files.

(Note that versions of ASP.Net before 4.0 used to apply style="Color:red" to all validators by default, making it hard to override their colours in CSS. If you find that is affecting you, then you can override it by setting the ForeColor property on each of the theme elements above, or add !important to your CSS rule.)

See:

Upvotes: 9

John Dunagan
John Dunagan

Reputation: 1465

If you use themes, you can set up your skin file to control the appearance of your validator. The problem with Forecolor inline is that the way .Net renders the default controls, it inserts a color="#..." attribute that overrides CSS at the element level. If Keltex's solution above doesn't get it for you with the !important directive, your next step is probably to use/adapt/help work on the CSS-Friendly Control Adapters project at http://www.asp.net/CSSAdapters/.

Shameless plug: Brian DeMarzo is working on extending this project at Google Code.

Upvotes: 3

Keltex
Keltex

Reputation: 26426

You can do this in your css file:

.validator
{
    color: blue !important;
}

This will override the inline red style.

Upvotes: 13

Ken Ray
Ken Ray

Reputation: 2528

Have you looked at themes?

Upvotes: 1

Related Questions