...

Field Validations are a way of making the user understand a mistake, and how to correct it.

...

Types

Type	Usage	Image
Field   Field validation error	Alerting the user on an action that will not allow them to complete the task.	Image Added
Field   Field validation warning	Alerting the user on an action that might contain a mistake or a non-fatal error.	Image Added

Usage & Behaviour

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
Text Field
Text Area
Drop-down Menu
Combo Box
Numeric Stepper
Date Picker
Time Picker
Search Field		NA
Switches		NA
Slider		NA
Single check box		NA
Check box group
Grid table cell
Tabs
Call To Action with short text		on Error, the button is disabled
Call To Action with mixed errors  Error takes priority
Call to action with long text.  Pop-up size might need to expand in height

...

• 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 changed it).
    

    

Default validation

• When starting to edit a field with a validation message on it, the current validation will be hidden (i.e. it will be treated as if the user had edited the field for the 1st time).If the user has entered a form, page, or screen form or page is opened for the first time (, and the fields are empty), the Missing validation validations should not be enabledshown. Otherwise the whole page may be covered in validation messages from the start. However, syntax Syntax and logical Logical validation should be enabled where appropriate.

• In cases where the user enters a page that already has When editing a form or page where fields already have an input, the warning validation should be displayed (e.g. the user enters a page already edited with warnings in itall pre-existing warning messages will be displayed while the fields are out of focus.

• 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

...

• 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 the 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. 

• For complicated fields, using an example in the tooltip message can help.

• Try to avoid negative words. For example rather than

  • Rather than Password does not meet requirements or Invalid Password → use Password must contain 8 alphanumeric characters.
    

Accessibility Compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

...