Validation is a very important aspect in web forms development and should be planned carefully. Well designed validation can favorably affect the user experience and can speed up the filling of forms. Poor validation can make considerable damage to the system and user experience. Not having any kind of validation is out of the question.

Another important thing that should be clear is that validation relates exclusively to user input. Messages that come from underlying layers, whether they're exception messages or any other, are NOT validation messages.

Validation can be implemented in many ways. We'll consider different options that you have when creating validation and we'll take a look at some examples.

Alert user upon submit

The "classic" validation process looks like this: user fills the form, presses submit button and gets notified if validation fails. However, informing user about required fields AFTER they have already filled the form is not a happy solution. Why let the user figure out which field is required or which format they should use for a phone number?

 
Yahoo Mail signup form detail - which fields are mandatory?

The article Rock Solid Form Validation With xHTML, CSS and jQuery provides a good explanation on how this can be done using jQuery. Be sure to check out LinkedIn signup form. Beside field validators, they inform a user with a message box on the top of the form. Be sure to check out my previous article CSS Message Boxes for different message types that explains the importance of alerting users in a proper way.

Mark required fields

The least you can do is mark required fields with an asterisk (*). This way, users will know exactly what fields have to be filled. A good practice is to put a note on the top of the form that indicates that all fields marked with an asterisk are required. Not all users know what asterisk means. Instead of an asterisk you can make required field labels bold or color them differently. Personally, I prefer an asterisk.

 
Comment form on jankoatwarpspeed.com - which fields are mandatory here?

The only exception would be if all fields are required. There is really no need to place asterisks on all fields. Just imagine what would it look like. In this case placing a note on the top of the form that all fields are required is enough.

Live validation and dynamic tips

Ok, now we know what to do with required fields. But what about field format? What about validating email address, URL or phone number format?  Nice way to solve this problem is to provide tips on web forms. A tip can provide additional information about field that has focus.

Excellent example is Digg.com signup form. Although Yahoo Mail signup form has similar feature, I think Digg.com has a better implementation.

Digg.com - a good example of dynamic tips

Another interesting example is Mixx.com signup form.

Mixx.com - visually enhanced tips

You can be very creative when making dynamic validation. Some interesting examples are Live Validation, Using Ajax to Validate Forms and my latest article on Design Shack Creating a Digg style sign up form.

How to present validation errors to the user?

When users eventually press submit button and validation fails, you have to inform them about validation errors.

1. One of the possibilities is to show validation message summary at the top of the form. ASP.NET has built-in ValidationSummary control for this.
2. You can also change the color of labels where validation failed. A good example for both solutions can be found here: Jquery form validator, because form validation is a bi***
3. You can add an asterisk to the right of a non-validated field.
4. You can add a message to the right of a field i.e. - "Required"

Whatever your choice may be, try to be clear and informative. Validation shouldn't confuse users but rather help them.

Client or server validation?

So far we were talking about client side validation and how it can be improved. But imagine the scenario in which JavaScript is being turned off. No doubt this might affect the application dramatically. This is one of the reasons why you should always have a server side validation as support to the client side validation. Server side validation cannot be switched off and will successfully perform no matter what you do on the client.

That means - use them both!

Validation in ASP.NET

ASP.NET has built in controls that enable incredibly easy validation creation. By using different validator controls and ValidationSummary control even a complex validation process can be done very fast. You can just drag and drop validation controls to the form, map them to form fields and you have a client-side validation. Creating server side validation is simple as well. You can use C# or VB.NET to perform even the extremely complex validation process.

I recommend you read Validating Form Input Controls tutorial and The Three Steps of Building an ASP.NET Validator Control.

Summary

Here is the summary of what you should always think of when creating form validation.

• Mark required fields with an asterisk
• Add tips to form fields
• Always, always, always implement both client and server validation

How do you implement validation? On submit or on blur? Client or server? What is your best practice?