| 🟢 Success | 🟡 Warning | 🔴 Error |
|---|---|---|
| Optional. Input value matches all validation requirements. | Input value is valid for submission, but could be incorrect. | Input value does not match stated syntax or value requirements. |
| Optional. Input data was successfully transferred from another source. | System issue is preventing validation from taking place but form can still be submitted. | Input value has been deleted from a required field. |
| User has attempted submission without filling required field(s). |
Our primary goal in form design is to facilitate a successful user form submission. Avoiding detours, false starts, and confusion is central to keeping users on the right track. There are a number things we do in order to help the user avoid form errors.
Input-specific feedback should be implemented based on the following criteria:
Showing feedback before the user can benefit from it presents an annoying and confusing experience. This is not limited to error messaging. Showing success feedback too early can trick the user into submitting data that is incorrect or incomplete.
Premature error feedback is annoying and distracting.
Premature success feedback may trick the user into submitting incomplete information.
We wait to display feedback until the user has clicked away from the input they were focused on (onBlur). If the user is updating a field that has received error feedback, the error is turned off as soon as the input is valid (onChange).
Password creation feedback helps users create passwords that are secure and valid – all while hiding the input from view.