Set the CSS class of ASP.NET invalid controls using jQuery

The ASP.NET validation controls are a very quick and effective way to add client-side & server-side validation to your web forms but they lack one very important feature out of the box: the ability to change the CSS class of the controls that are invalid. Changing the class of the invalid controls will allow you to style them in such a way that they help bring attention to the fact that the user needs to do something more to complete the form successfully.

It is quite simple to add this functionality (for clients with JavaScript enabled at least) using a little bit of JavaScript and everybody’s favourite JavaScript library, jQuery!

First of all, set the CssClass property of all your validator controls to “validation-error”. The easiest way to achieve this is by using a skin file. See this post for more details on how to do this.

Then add the following to your site’s JavaScript file (assuming you’re already using jQuery):

 
/// <reference path="jquery-1.3.1.js" />

$(document).ready(function(e) {
    $("span.validation-error")
        .bind("DOMAttrModified propertychange", function(e) {
            // Exit early if IE because it throws this event lots more
            if (e.originalEvent.propertyName && e.originalEvent.propertyName != "isvalid") return;

            var controlToValidate = $("#" + this.controltovalidate);
            var validators = controlToValidate.attr("Validators");
            if (validators == null) return;

            var isValid = true;
            $(validators).each(function() {
                if (this.isvalid !== true) {
                    isValid = false;
                }
            });

            if (isValid) {
                controlToValidate.removeClass("error");
            } else {
                controlToValidate.addClass("error");
            }
        });
});

And there you have it. Now when any validator on your form has the isValid property tripped to false on the client side, the CSS class of the offending control will be changed to “error”.

---