Updating the ASP.NET validator controls to change invalid control’s CSS class on non-JavaScript clients

In my previous post I showed how you could add support for the ASP.NET validation controls to automatically change the CSS class of invalid controls on the client side using some jQuery. But what about when the client doesn’t have JavaScript enabled?

The simple anwser is to sub-class the built-in ASP.NET validation controls and add this behaviour ourselves, then use tag mapping in the web.config file to automatically use our modified validator controls instead of ASP.NET’s built-in versions.

The following is an example of how you could sub-class the RequiredFieldValidator control to support changing the CSS class of the associated control when it fails validation:

using System;
using System.Linq;
using System.Web.UI.WebControls;

namespace WebApplication16.Controls
{
    public class ClassChangingRequiredFieldValidator : RequiredFieldValidator
    {
        protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);
            var ctl = NamingContainer.FindControl(ControlToValidate) as WebControl;
            if (ctl != null)
            {
                if (IsValid)
                {
                    var className = String.Join(" ", ctl.CssClass.Split(' ')
                        .Where(c => !c.Equals("error")).ToArray());
                    ctl.CssClass = className;
                }
                else
                {
                    if (ctl.CssClass.Split(' ').FirstOrDefault(c => c.Equals("error")) == null)
                    {
                        ctl.CssClass = String.IsNullOrEmpty(ctl.CssClass) ? "error" : ctl.CssClass + " error";
                    }
                }
            }
        }
    }
}

Next you need to add some configuration to your web.config file to force ASP.NET to use this control instead of the build-in version:

<pages styleSheetTheme="SiteTheme">
 <controls>..</controls>
 <tagMapping>
 <add tagType="System.Web.UI.WebControls.RequiredFieldValidator" mappedTagType="WebApplication16.Controls.ClassChangingRequiredFieldValidator" />
 </tagMapping>
</pages>

Make sure you change the namespaces to match your application’s.

Just repeat this process for the other validation controls and combine it with the technique in my previous post to get your invalid controls’ CSS class automatically changed, either client-side if the user has JavaScript enabled, or server-side if not.

---