Successful form validation typically does the following:
- Keeps the user notified on the status of form
- Alerts the user of errors immediately
- Uses help hints to indicate the format of the required information
Validation TechniquesThere are two primary approaches a web developer can take to implement form validation.
The error-only approach allows the user to fill out the form entirely before being notified of any mistakes. After the form is submitted, the error page indicates which fields were missing or incorrect type of data. In the case of a long form, this can be a frustrating process for a user. This article from Smashing Magazine explains in detail why error-only validation is not the best approach.
The other method is inline form validation. This is popular among sign-up forms and simple web forms. Inline form validation notifies the user of mistakes as they are entering data. This method keeps the user informed and engaged, while reducing the amount of errors and creating a better user experience. In addition, the primary goal is for users to complete the form and a less frustrating experience can lead to higher conversions. Check out this article about the benefits of inline form validation from the blog A List Apart.
Statistics reported in the article for inline validation are telling:
- Errors: Decrease by 22% / Success Rates: Increase by 22%
- Satisfaction rating: Increase by 31%
- Form completion times: Decrease by 42%
Examples of good solutions for form validation:
|Wufoo Account Creation Web Form|
Wufoo Account Creation Form
This form has plenty of great things going on. The required information is noted with a red asterisks, there is help text that informs the user the purpose behind the required data and the format requirements, and the form tells you what section you are on by highlighting the input box.
|Harvest Free Trial Sign-up Form|
Harvest Free Trial Sign-up Form
This form requires a valid email address and URL to complete the free trial process. As a user is entering data, the form indicates required information in red and notifies the user of any errors along they way.
|Mint Web Sign-up Form|
Mint Web Sign-up Form
Mint.com sign-up form indicates which fields are experiencing errors. In the example above, the user must enter a valid email address, password, and zip code to complete the form and the form validation does a great job of notifying the user of errors.
- Show what is optional vs required. (asterisks for required)
- When error is received, use helpful hints to give the user additional tips on how to correct the error
- Left align your labels for easier reading
- Add placeholder text in the input fields. This gives the user additional examples of the format requirements
Helpful Resources:Smashing Magazine Web Form Validation Best Practices
Web Form Design: Showcases And Solutions