Inline validation is a method to check the validity of an input and give feedback before submission. It significantly enhances the usability and user experience of forms. This article explains inline form validation and error handling design techniques.
The easy part of inline validation is the validation part. When an entry is validated it can be communicated with a simple check mark. Inline errors are more tricky.
Presenting inline errors
Inline errors should be presented with copy explaining the issue and how to fix it.
It can be presented in many ways including:
Above the field
Below the field
As a tool-tip
I have distilled 5 ways; each with its trade-offs and limitations. It’s important to address problems early and at their source, but it is easy to make matters worse with an inconsiderate approach.
1. When a user click into an input
Immediately showing an error when a user clicks into a field is annoying, misleading, and distracting. It is like the form is yelling at you before you say anything. Talk about a bad relationship… However, this approach can be done well by presenting helper text in place of an explicit error until the error is confirmed, or the entry validated.
2. As a user types
This approach annoys the user until the entry is validated. The user is harassed with each entered character, providing more frustration than help. It is like arguing with someone who is talking over you… However, this method provides helpful feedback for password strength and username availability.
3. Once the user reaches the character requirement
This validation method works for inputs with predictable character lengths like Zip codes, phone numbers, CC numbers, etc. However, this can be problematic for internationalization because the intended formate is not always known.
4. When a user leaves the field
This is probably the best default behavior because validation occurs after the entry is made explicit. However, it can disrupt a user’s flow because it provides feedback after the user has moved on.
5. When a user pauses
This technique provides feedback when a user pauses. This mitigates the annoyance of inline errors as a user types and provides feedback when they pause or exit the input.
It is surprising how many forms don’t employ simple inline validation and error handling, and it is even more surprising how often it is poorly implemented. I hope this article helps you design better web form validation. I would love to hear your helpful techniques.
Article was taken from Forms Need Validation | Follow the Bear