...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
| Table of Contents |
|---|
...
...
|
Description
Field Validations are a way of talking to our users. It is designed to make making the user understand a mistake, and the ways how to correct it. Example:
...
Types
Type | Usage | Image |
|---|---|---|
|
Field validation |
error | Alerting the user on |
an action that will not allow |
them to complete the task. |  |
|
Field validation warning | Alerting the user on |
an action that might contain a mistake or a non-fatal error. |  |
Usage &
...
Behavior
Internal Logic
All alphanumeric input fields will display the value entered by the user. If the input is invalid, an indication for invalid/warning will be displayed. Prevention of input is not allowed (e.g. typing on the keyboard “A” and not displaying it in the field)
Triggering the validation is set by 3 types:
Syntax validation - validation should be displayed while typing.
For example:An illegal character was typed (e.g. numbers instead of alphabetic)
Exceed the number of characters (e.g. user input 3 digit number where only 2 digits is 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 left the field
Missing input on a required field
Validation is displayed as soon as the user leaves (out of focus) the required input field which 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 (Submit button is enabled)
Autocorrect - Some cases require an automatic correction of the invalid input.
The components Pagination and Slider with a numeric input, which have a clear visible definition of a numeric range, will behave as follow.
An invalid value will be indicated.
On OutOfFocus (e.g. user clicked somewhere outside the field) the entered value will automatically change to:
Last valid
Edge range - if the input exceeds the range of options(e.g. in pagination “0” will auto-correct to the “1” )
Connected fields - where different fields are dependent on each other and the numeric range is dynamic.
On OutOfFocus with an indicated invalid input, a pop-up message will appear with the options of:Back - returns the focus to the field with the last used input
Revert - returns the focus to the field with the latest valid input (the one before the user changed it)
See pop-up example:
Default input/validation
When starting to edit a field with a validation indication on it, the current indication will be hidden (i.e. it will be treated as if the user had edited the field for the 1st time).
If the user had entered a form/page/screen for the first time (fields are empty), logical validation should not be enabled. However, syntax validation should be enabled.
In cases where the user enters a page that already had input, the warning validation should be displayed (e.g. the user enters a page already edited with warnings in it).
Structure
...
Structure
A validation field consists of:
Color frame or & a Small with a small icon on the top-right corner - corner. This marks the validation type.
A validation tooltip message appears upon hover of A validation Tooltip message, which appears on hover over the validated field/component .
A descriptive message next to the submit buttonaction buttons:
Error messages have a higher priority than a warning . In case the error was messages. When errors are fixed, the warning validation should then be presentedshown.
In some cases of Where there is limited space or a short form, no descriptive message will appear.
Examples:
Components | Error | Warning | |
 |  |  | |
 |  |  |
 |  |  | |
 |  |  |
 |  |  | |
 |  |  | |
 |  |  | |
 | NA |  |
 | NA |  | |
 | NA |  | |
Single |
 | NA |  | |
Checkboxor Radio Button group |  |  |  |
Spreadsheet Tables cell |  |  |  |
 |  |  |
Examples in context:
Call To Action with short text. |
on Error, button is disabled
 |  |
Call To Action with mixed errors. |
error Error takes priority. |
 | |
Call to action with long text. | |
PopPop-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.
...
Text position:
Text position can be either near the CTA calls to action (right-aligned) or at the beginning of the row (left-aligned) according to size and available width
See examples:
...
Content
Descriptive text on the actions row (e.g. Submit)near the action buttons.
If only
one field hasn’t passed validation, the text near the
action buttons should be the same as the
tooltip.
If both
Warnings and
Errors are found, the text should address the Error.
If multiple fields
haven’t passed validation of the same type, the text near the
action buttons should be
‘X warnings found’.
In cases where the text is very long, the section should get a scroll Scrollbar.
For example:
In general
Specify why field info was not accepted - your validation messages should tell users exactly why their information got rejected or may have some risk
If the values entered may impact some other part of the system, briefly explain what may be impacted
Keep it short!
...
There are 2 options for the content of the error message:
Generic
The content of the message is written in advance and there is no need to refer to the specific text that the user typed, such as This is not a valid zip code.Input based (Preferred where applicable)
The content of the message can dynamically change based on user input. Use it to clarify where the error is coming from. For example:Rather than Invalid input use → Zip codes cannot contain the special character "%".
Rather than You cannot book this flight. Please select another destination or date. Use → Direct flights to Dublin are only available in August. Please select another destination or date.
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
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.
Autocorrect
Some cases require an automatic correction of the invalid input:
The components Pagination and Slider with a numeric input, which have a clear visible definition of a numeric range, will behave as follows.
An invalid value will be indicated.
When the user clicks outside of the field (out of focus), the entered value will automatically change to:
Last valid.
Edge range, if the input exceeds the range of options (e.g. in pagination 0 will auto-correct to 1).
Connected fields. Where different fields are dependent on each other, and the numeric range is dynamic.
When the user clicks outside of the field (out of focus) with an indicated invalid input, a Popup message will appear with the options of:Back - returns the focus to the field with the last used input.
Revert - returns the focus to the field with the latest valid input (the one before the user had changed).
...
Default validation
When a form or page is opened for the first time, and the fields are empty, the missing validations should not be shown. Otherwise, the whole page may be covered in validation messages from the start. However, Syntax and Logical validation should be enabled where appropriate.
Only Syntax errors and warnings will be shown while the user is editing a field (it is in focus).
All other warnings and errors (Logical and Missing) will be hidden while the user is editing a field (it is in focus). They should appear again once the user clicks outside of the field (it is out of focus).
Interaction
Validation tooltips
Any field /or tab that has a validation indication message will also have a tooltip.
The validation tooltip takes priority over any other tooltip (if one exists).
Location By default, the location of the tooltip is by default on to the right of the field, except when where there is no space
Tooltip timing should be - Tooltips (see interaction section)
Warning and Error has .
See the Interaction section of Tooltips for timing information.
Warnings and Errors have the same tooltip interaction.
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
...
Content Guidelines
2 options for the content of the error message:
Generic
The content of the message is written in advance and there is no need to refer to the specific text that the user typed, for EX: "not a valid zip code"Input based (
Preferred option where applicable)
The content of the message can dynamically change based on the input of the user, use it to clarify to the user where the error is coming from.
Some examples:Invalid input → zip code cannot contain the special character: "%"
You cannot book this flight, please select another destination or date → Direct flights to Dublin are only available in August. Please select another destination or date
For complicated fields, an example in the text of the tooltip can help.
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
(e.g. ". For example: Rather than Password does not meet requirements
"or
"Invalid Password
"use →
could be turned into→ "Password must contain 8 alphanumeric characters
")
Accessibility compliance
Focus management
Used as any component with a tooltip
Screen reader support
Screen reader should read a loud the state of the field once the user focuses on it.
Contrast & size compliance
...
.
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.
Accessibility Compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Design
Zeplin link | Screen thumbnail |
|---|---|
 | |
Code
...
