Change Background Color of Invalid Controls (ASP.NET Validator)

I was working with a customer who has invested a lot in redoing the validation in their web application. I accidentally suggested wouldn’t it be nice if we could change the background or border of the field in question. The customer loved this idea which meant I’d just created more work for myself. After searching about, I wasn’t finding this done for me, so I actually had to write some code instead of cutting and pasting.

If you set a breakpoint on WebForm_OnSubmit and step in, you can check out the .NET validator script. The key thing here is a global array called Page_Validators. From here, it is fairly trivial to test and change something about the control in question.

function fnOnUpdateValidators()
{
    for (var i = 0; i < Page_Validators.length; i++)
    {
        var val = Page_Validators[i];
        var ctrl = document.getElementById(val.controltovalidate);
        if (ctrl != null && ctrl.style != null)
        {
            if (!val.isvalid)
                ctrl.style.background="#FFAAAA";
            else
                ctrl.style.backgroundColor = "";
        }
    }
}

Of course, one problem is if the control already had a background color, it would be lost. This can be circumvented by storing the old value in an attribute or elsewhere. Also, custom validators are a special case so you will need to add the appropriate changes for fields validated in a custom way.

To make sure my function is called, I use the deprecated Page.RegisterOnSubmitStatement(“val”, “fnOnUpdateValidators();”). This will call my function after the validators have fired so the isvalid is up to date.