Archive for March, 2007

Validation with confirmations in ASP .NET

In his book Designing The Obvious, Robert Hoekman makes a few good points regarding inline validation techniques. Validation is often neglected when building a web application and little or no time is spent improving validation to give the end-user a better experience when using online forms. Validation should not get in the way of people using your site or web application, it should be seamless. The most effective way to manage validation is to catch errors before they happen. This would seem obvious but many of us out there are guilty are not paying attention to validation. Supplying hints of expected content format or simply confirming to a user that he/she has entered the correct data goes a long way to ensuring that a user feels comfortable using your web application.

I am quickly going to show you how to implement a confirmation ‘tick’ using the built in ASP .NET validators in Visual Studio 2005. Assuming that you are using these validators and you expect your clients / users to be using a javascript enabled browser, you can use some simple javascript to implement confirmation ticks every time a user successfuly completes a field.

Validation Example

Using one of the fundamental principals of Ruby on Rails, ‘Convention over Configuration’ we need to set the ID of the tick image to the name of the Textbox + ‘_ValidatorOk’. So if our textbox ID is called ‘Field_Duration’ then our tick image ID is ‘Field_Duration_ValidatorOk’. We also need to set the display style attribute of the image to ‘none’ (style=’display:none’) by default so that the tick is hidden until valid data is entered.

We need to fire off some javascript when the onblur event of our textbox is fired. This javascript will fire the ASP .NET Validators which will let us know if the data is valid or not. If the data is valid we can display the tick. To do this, simply add an onblur event to the Textbox.

Example: <asp:Textbox id=”Field_Duration” runat=”server” Text=”” onblur=”FireCustomValidation(this);” />

Then include the javascript function ‘FireCustomValidation’ which will look something like this:

function FireCustomValidation(fldobj)
{
    if (typeof(Page_ClientValidate) == 'function') {
        var passed = true;
        for (i = 0; i < Page_Validators.length; i++) {
            if (Page_Validators[i].controltovalidate == fldobj.id) {
                ValidatorValidate(Page_Validators[i]);
                if (!Page_Validators[i].isvalid)
                    passed = false;
            }
        } 
        if (passed)
            document.getElementById(fldobj.id + 'ValidatorOk').style.display = '';
        else
            document.getElementById(fldobj.id + 'ValidatorOk').style.display = 'none'; 
   }
}

Now, when the user completes and leaves a field, the function above will execute. The function uses the Client API for the ASP .NET validators (see here). If Client Side Validation is not supported then the function does nothing. Otherwise it iterates through each validator on the page looking for ones that match the field just completed. When found, their respective validation functions are fired. The ‘isvalid’ attribute is then checked, if any of the validators return false then the tick is hidden, if all pass then the tick is shown. You could write some extra code to stop errors occuring if the ‘tick’ object does not exist.

You could include this script in a javascript file that is included in your master page. Using this technique, users feel more confident as they complete your webform. There is a lot more you could do with this code, such as highlight the entire table row when an error occurs.

Hope you found this useful.