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.


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

  1. Bob Maes says:

    You can wrap this in a custom ControlAdapter to enforce this implicit to all BaseValidators.

    public class ValidatorAdapter : ControlAdapter
    {
    protected override void OnPreRender(System.EventArgs e)
    {
    base.OnPreRender(e);

    var controlToValidate = Control.NamingContainer.FindControl(((BaseValidator)Control).ControlToValidate) as WebControl;

    if (controlToValidate != null)
    {
    if (((BaseValidator)Control).IsValid)
    {
    var className = String.Join(” “, controlToValidate.CssClass.Split(‘ ‘)
    .Where(c => !c.Equals(“error”)).ToArray());
    controlToValidate.CssClass = className;
    }
    else
    {
    if (controlToValidate.CssClass.Split(‘ ‘).FirstOrDefault(c => c.Equals(“error”)) == null)
    {
    controlToValidate.CssClass = String.IsNullOrEmpty(controlToValidate.CssClass) ? “error” : controlToValidate.CssClass + ” error”;
    }
    }
    }
    }
    }

    Kind regards,


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s