Intro to UI Wireframing > 2. UI Controls > 2.11. Validation
Validation is often used as a light-weight alternative to alerts. It is a great way to present feedback or guidance with limited interruption.
When to Use Validation
Validation is sometimes used in place of, or in addition to, alerts to provide in-context error messages. But it's not just for telling users what they have done wrong. It can also be used to tell users when they are doing something right, or to suggest ideas for improvement (such as password strength).
Validation is often used to help users recover from errors. But even better than providing good validation is preventing the need for it in the first place. Following text input guidelines can minimize the need for validation.
How to Use Validation
- Only show error validation messages or styles after a user has interacted with a particular field.1
- Try to validate "on-the-fly", before the form is submitted. But if you can't, consider adding a notification to summarize feedback at the top of the page when it reloads.
- Don't clear invalid input data unless users aren't able to correct errors easily. Doing so allows users to correct mistakes without starting over.2
- Provide guidance on how to fix any errors, don't just tell users what they did wrong.
- Follow voice and tone guidelines, if you have them. (If you don't have your own, there are some great examples here.)
There are generally three states for validation components (shown above):
- Success - Tells users that their entry or selection is valid. Not required, but can be helpful for new or novice users.
- Warning - Usually indicates that an entry or selection is valid, but not recommended. A weak password, for example.
- Error - The most common form of validation. Alerts users to an invalid entry and, preferably, suggests how they can fix it.
The primary way in which validation components vary is in their presentation or styling. Color is frequently used, although in different ways. It should not be the only indicator, however, because it may not be discernible by color blind users. An icon and/or help text is often used in addition.
- U.S. Web Design System
- KDE Human Interface Guidelines