Smartly Display ASP.NET Validation Information

Preface

Current ASP.NET validation framework displays validation information in a very simple manner. Some applications even ignore client-side validation, and when some data is found invalid, the page will be posted back and validation error information will be shown such as some area is highlighted, some text color is changed, etc. Undoubtedly, this is a better way to display validation information. However, its drawbacks are obvious: it needs submitting form and thus takes more time; it needs more complex validation handling in code-behind files. In practice, I found that we can achieve the same purpose through some small enhancements on client-side validation script. In the following sections, I will show the tricks. Once you get the idea, you can work out your own way.

Tricks

I would like to take how to change related label color as example and explain the tricks. First of all, I don't want to modify WebUIValidation.js directly. So we need to know how to dynamically modify JavaScript event function. That is easy, look at the code below. Actually, the trick is used in WebUIValidation.js.

var __funcbody, newfunc;

__funcbody = ValidatorUpdateDisplay.toString();
__funcbody = __funcbody.substring(__funcbody.indexOf("{") + 1, 
                                 __funcbody.lastIndexOf("}"));

newfunc = new Function("val", "ChangeLabelColor(val ); " + 
                                             __funcbody );

ValidatorUpdateDisplay = newfunc;

ValidatorUpdateDisplay is a function used to update display each time the web form data is validated. We intercept this function and add in another function ChangeLabelColor. The purpose is to change label color if validators fail.

Second, look at function ChangeLabelColor.

function ChangeLabelColor(val){
    if(document.all(val.controltovalidate + '_lbl')!= null ){
        // Find label through naming rule
        var lbl = document.all(val.controltovalidate + '_lbl');
        var k, value;

        // Find out all validators associated
        var vals = new Array();
        for(k=0; k < Page_Validators.length; k++){
            if(Page_Validators[k].controltovalidate == val.controltovalidate)
                vals.push(Page_Validators[k]);
        }

        //Determine if some validator fails
        value = true;
        for(k=0; k < vals.length;k++)
            value = (value && vals[k].isvalid);

        // Change label text color
        if(value){
            lbl.style.color ='black'; // normal color, black
        }else{
            lbl.style.color = 'red'; // error color, red
        }
    }
}

There are three problems to be addressed in this function.

1. We need to find out Label text object. Here we only know validator. Each validator has a property named ControlToValidate. Through certain naming rules, it is easy to find the Label text object. Some other better ways may be used here.
2. Determine if validator is valid. The trick is we need to check all validators associated with a form field here since it may be flipped many times. There should be more efficient ways here. In WebUIValidation.js, there are lots of inefficient code. In practice, I found it is not an issue.
3. Change property of Label text object. Here we change text front color. You can change other style properties.

Wrap up

After you understand 1, 2, 3, you can work out your ways to display validation error information. The power comes from DHTML and JavaScript at your hand. WebUIValidation.js would be a good example of learning JavaScript programming. A live demo is here.