| Table of Contents | ||
|---|---|---|
|
...
Type | Usage | Image |
|---|---|---|
| Alerting the user on an action that will not allow them to complete the task. |  |
| Alerting the user on an action that might contain a mistake or a non-fatal error. |  |
Usage &
...
Behavior
Structure
A validation field consists of:
Color frame with a small icon on the top-right corner. This marks the validation type.
A validation Tooltip message, which appears on hover over the validated field.
A descriptive message next to the action buttons:
Error messages have a higher priority than warning messages. When errors are fixed, the warning validation should then be shown.
Where there is limited space or a short form, no descriptive message will appear.
Examples:
Components | Error | Warning | |
 |  |  | |
 |  |  | |
 |  |  | |
 |  |  | |
 |  |  | |
 |  |  | |
 |  |  | |
 | NA |  | |
 | NA |  | |
 | NA |  | |
Single Check Box |  | NA |  |
Check Boxor Radio Button group |  |  |  |
Spreadsheet Tables cell |  |  |  |
 |  |  |
...
Call To Action with short text. |  |  |
Call To Action with mixed errors. Error takes priority. |  | |
Call to action with long text. Pop-up size might need to expand in height. |  | |
...
Errors and warnings can be triggered by 3 types of action:
Syntax validation.
Validation should be displayed while typing. For example:An illegal character was typed (e.g. numeric instead of alphabetic).
The maximum number of characters has been exceeded (e.g. user input a 3 digit number where only 2 digits are allowed).
Logical validation.
Any validation that is set on the required value (e.g. Max. input of 100). In most cases, the validation will occur after the user has left the field.Missing input on a required field.
Validation is displayed as soon as the user leaves (out of focus) a required input field that has no input.
Note: when a form has a single required field, the validation will appear only after the user tries to submit the form.
...
Use field validations for any user input fields.
Specify why the field information has not been accepted. Your validation messages should tell users exactly why their information got rejected or may have some risk, and how it can be fixed.
If the values entered may impact some other part of the system, briefly explain what may be impacted.
Keep the text short!
For complicated fields, using an example in the tooltip message can help.
Try to avoid negative words. For example: Rather than Password does not meet requirements or Invalid Password use → Password must contain 8 alphanumeric characters.
Additional examples to avoid:
Oops. Oops, something wasn’t right.
Error. This form has errors.
Failed. Form submission failed!
Problem. There was a problem creating your account.
Invalid. Oops, Something has gone wrong.
Prohibited. 3 errors prohibited this user from being saved.
...