| Table of Contents | ||
|---|---|---|
|
...
Field Validations are a way of making the user understand a mistake, and how to correct it.
...
Types
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 Checkbox |  | NA |  |
Checkbox or Radio Button group |  |  |  |
Spreadsheet Tables cell |  |  |  |
 |  |  |
Examples in context:
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. |  | |
Unlike Errors, the Warning fields can appear on top of controls which do not have a text field, since a warning can appear when there is a conflict between two controls.
...
Rephrasing examples (taken from Verint's Suite):
Before | After |
|---|---|
Percentage must be an integer | Please enter only numbers (e.g. 48) |
Max number of bids allowed (8) for this auction exceeded | You have reached (11) the maximum bids allowed (8) for this auction. Please remove 3 bids. |
Not a valid number, please enter length in minutes | Please enter length in minutes (e.g. 30) |
Invalid selection for employees - single or group | You can select a single employee as well as a single group or organization (not both) |
The form has errors | Please complete all mandatory fields |
Internal Logic
All input fields will display the value entered by the user.
If the input is invalid, an error or a warning message will be displayed.
Prevention of input is not allowed (e.g. not displaying characters in the field as they’re entered).
On Error, the button form Apply/Save button is disabled
...
Tooltips positioning examples on hover:
Content | Examples | Comments |
|---|---|---|
1 or more rows of text, to the right of the warning or error icon |  | |
Partial coverage of control |  | User can still click the control |
Left position |  |
Best Practices
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.
...
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Design
Zeplin link | Screen thumbnail |
|---|---|
 | |
 |