Click here to Skip to main content
Click here to Skip to main content

Smartly Display ASP.NET Validation Information

, 12 Oct 2004
Rate this:
Please Sign up or sign in to vote.
Enhance ASP.NET client-side JavaScript.

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.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

billxie

United States United States
No Biography provided

Comments and Discussions

 
GeneralExactly what I needed PinmemberRob van der Veer28-Apr-08 1:50 
GeneralControl To Validate enclosed in panel PinmemberJeanette White7-Nov-07 3:31 
GeneralFix Pinmemberjbkind31-Jan-05 18:19 
GeneralRe: Fix Pinmemberbillxie1-Feb-05 7:47 
GeneralRe: Fix Pinmemberjbkind1-Feb-05 16:17 
GeneralRe: Fix Pinmemberbillxie2-Feb-05 7:03 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.141223.1 | Last Updated 12 Oct 2004
Article Copyright 2004 by billxie
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid