Wwohn.com : Real time validation of website forms

You can obtain input and information from your visitors from website forms. Such forms may have text areas and input fields for usernames, passwords, e-mail addresses, etc.

The website should check the provided input and determine if it validates based on a pre determined set of rules. E-mail addresses should for example contain a “@” and an extension. Usernames should be unique and passwords may have safety requirements such as a minimum number of characters.

What is retro active validation

If validation is done retroactively, the visitor gets an error en the opportunity to change the input. Hopefully the visitor is not required to completely fill in the entire form again. Moreover, the visitor should be aware what went wrong to be able to give the correct input.

A good example that guides the visitor retroactively is the registration page of Pownce. After clicking “Okay, done” it shows which field did not validate. If you click on a field it will tell you what you should do.

Real time validation can be of help here since it provides feedback to the user at the moment the visitor is completing the form.

What does real time validation look like

A good example is the registration page of Twitter.

I tried to register under my own username. The live validation system provides immediate feedback and shows that the username has been taken. Also, the required course of action is stated, ie choose another username.

A missed opportunity is the validation of the password. I would expect Twitter to use real time validation to verify that the username requires the minimum number of characters and to verify that the two password boxes contain similar passwords.

You can find other examples of live validation below:

Sign up with Digg.com
This form not only validates that my e-mail address does not have the right format, it also validates that the re-type e-mail address field is not similar to the first e-mail address field, and so on. It seems quite extensive.
Register at Basecamp
Note that live validation only regards the URL and its availability. Moreover, it does not verify the other requirements such as “letters and numbers only - no spaces.” Another missed opportunity. Finally this validation does only show errors, it should also show if a field is filled in correctly.

Advantages of live validation

There are several advantages, many lead to an improved usability such as:

The visitor will know instantly why a field is not filled in correctly.
There is an interaction with the visitor.
The visitor can adjust immediately.
The visitor will not be forced to again submit the form over and over.
Moreover, live validation forces you to rethink your input fields and information you expect from the visitor.

Requirements for a successful implementation of live validation

These kinds of real time validation processes can really help your visitor. As always, there are some things you should keep in mind:

Use clear questions. Ask somebody to use your form and react to it.
Explain what went wrong. If the passwords do not match or if the password is too long, let people know so that they can adjust it accordingly.
Real time validation often happens client side, this is not safe. It cannot replace server side validation, it only helps your visitor to fill in the form correctly.
Make sure that the software used for the validation process does not significantly slow down the site.
Be consistent, use validation on all fields or none.
Do not only show if something goes wrong, also show if a field is filled in correctly.

How to implement real time validation

The easiest download seems to be livevalidation, a Javascript file of 12.5kb. This files should be inserted between the <head></head> tags on your webpage. You can then validate the forms using some specific commands. The website provides an example and a tutorial on how to do this.

Another, more complex solution uses AJAX. It allows you to validate with PHP or ASP. Particletree has a complete tutorial on this.

Why is live validation rare on web forms

I am starting to wonder why I rarely see this kind of live validation. Moreover, the website that have real time validation sometimes only use it for part of their forms.

Will this become popular or are there disadvantages I am missing here? What do you think?

Popularity: 26% [?]

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.