Tuesday, May 22, 2012

User-Friendly Validation using ErrorProvider

Introduction

Data input validation in Windows Forms is essential. Built-in validation doesn't go much further than an enforcable maximum length for textboxes, but there are some nice methods you can use to make validation a breeze.
When a user is tabbing fast through a dialog entering data, they are sometimes going to get it wrong. We're only human, and this is natural. When we do get it wrong, however, we don't want to be bugged about it. The last thing we need is for a Message Box to pop up when we tab away from a field, telling us it's invalid. That would be an unnecessary interruption. Also, we don't want all the validation done when the user presses the OK button, because they could then potentially be given a great big message with all the fields that are wrong. So what we need is a method of unobtrusively showing that data is invalid, and presenting it in such a way that it is immediately obvious what is wrong and what to do about it.

Enter the ErrorProvider

This little Gem is often left unnoticed, which is a funny thing considering it sits in the Windows Forms Controls Toolbox by default. It is a component rather than a control, so when you put it on your form it will sit in the component tray below.
What this component can do is display a little red icon beside any control which is invalid. When the user hovers their mouse over this icon a tooltip is instantly displayed with information about the invalid field. It can also optionally blink the icon. While this may sound trivial, it's actually rather useful.

Using it on a form

Create yourself a form, with a textbox on it. Put an ErrorProvider in your component tray too. Now, in the Validating event of the textbox you need to put the code to test the contents for validity and optionally display the error icon. It's up to you how you do your validation, it could be as simple as text length constraints or as advanced as regular expressions matching.
    private void txtTown_Validating(object sender, 
    System.ComponentModel.CancelEventArgs e)
    {
        if (txtTown.Text.Trim().Length == 0)
            errorProvider.SetError(txtTown,
            "Please enter the customer's town.");
        else
            errorProvider.SetError(txtTown, "");
    }
You can have as many error providers on a form as you wish, but I can only see a potential use for two. You could have one with a yellow icon rather than red, for when a field is valid but could be better.

Example code

I have attached a sample project written in C#, which has a typical (though simplified) data entry form for some customer information. You will find as you tab through the textboxes on the form, that you will get the error icon appearing unless you enter data in the right format. Hovering the mouse over the error icon will tell you what is wrong and how to fix it.

No comments:

Post a Comment