Validation Controls Lost Their Red Color

I was recently finishing up a new website (http://www.trailcalendar.com) and I noticed that all the validation and validation summary controls in my project no longer appeared in red.

Normally, these controls will display with "color:Red" as part of their style attribute unless you override the ForeColor property. Even if you have CSS styles in effect that change the text color, the inline attribute will override it and the control will appear red. But, all of a sudden, this was no longer being included in my output.

I could not figure this one out. I created a new test project from scratch and I got the same thing (no red color). Yet, when I looked at my older projects, all validation controls were including the color style attribute. What had changed?

It turns out that what had changed is that I recently upgraded to Visual Studio 2010 and ASP.NET 4.0. It appears ASP.NET 4.0 has changed the way that it renders some of the output. Most of these changes are great as they result in more concise HTML. (Verbose HTML has always been an issue with ASP.NET.)

Some of these changes include menus, which are now output as lists instead of tables, properties like border="0" are no longer included, and error text of validation controls is no longer set to red! Note that I think these are great changes and highly recommend the upgrade. In an effort to make the HTML more concise, VS 2010 also gives you the option of preventing your tag IDs growing from something like "LinkButton1" to "ContentPlaceHolder1_ContentPlaceHolder1_Repeater1_LinkButton1_0".

So, now that I know what is causing this, what is the solution? Well, it turns out there is a compatibility setting for this. The controlRenderingCompatibilityVersion can be set to "3.5" to produce the same rendering I'm familiar with. This setting goes in your web.config file and is demonstrated in Listing 1.

<?xml version="1.0"?>
<configuration>
  <system.web>
    <compilation debug="false" targetFramework="4.0" />
    <pages controlRenderingCompatibilityVersion="3.5" />
  </system.web>
</configuration>

It turns out that the Visual Studio Conversion Wizard sets this setting automatically when upgrading a project. This makes sense because you might have a big project that has many places that no longer display correctly. To be honest, I'm just not sure what happened in my case and don't recall if I ran the Conversion Wizard or not.

I'm still not entirely clear on what the expectation is here. I love the option of producing more compact HTML, but I still want my validation text to appear red and I would rather use the newer ASP.NET 4.0 rendering. On my project, I will probably go in and change the ForeColor property on every validation control in my project to "Red".

Either way, I thought I would post about this in case anyone else was bit by this issue. It certainly took me by surprise.