...

• 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:

  

Structure

The field validation consists of:

• Color frame or  & a Small  icon on the top right corner - marks the validation type

• A  validation tooltip message appears upon hover of the validated field/component 

• A descriptive message next to the submit button

  • Error messages have a higher priority than a warning. In case the error was fixed, the warning validation should be presented.

  • In some cases of limited space or a short form, no descriptive message will appear

Examples:

Components		Error	Warning
Text field
Text area
Dropdown menu
Combo box (free text field)
Spinner (free text field)
Date Picker (free text field)
Time Picker (free text field)
Search field		NA
Toggle		NA
Slider		NA
Single checkbox		NA
Checkbox group
Grid table cell
Tab
Call To Action with short text		on Error, 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
*  Unlike "field validation error" the warning version can appear on top of controls that does not have a text field, since a warning can appear when there is a conflict between 2 controls.

Text position:

• Text position can be either near the CTA (right-aligned) or at the beginning of the row (left-aligned) according to size and available width
  See examples:

  Image RemovedImage Added

  
  

  

Content

• Descriptive text on the actions row (e.g. Submit)

• If only 1 field didn't pass validation, the text near the CTA should be the same as the tooltip 

• If both Warning and Error are found, the text should address the Error

• If multiple fields didn't pass validation of the same type, the text near the CTA should be "X warnings found" <<TBD with Docs.>>

• In cases where the text is very long, the section should get a scroll
  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!

...

Interaction

Some cases allow the user to auto-correct the entered input - Validation applies in the background. For example, when entering a page number in a Pagination component, entering an invalid number (e.g. 0) will auto-correct to the 1st page (e.g. 1).

Validation tooltips

• Any field/tab that has validation indication will also have a tooltip

• The validation tooltip takes priority over any other tooltip (if exists)

• Location of the tooltip is by default on the right of the field except when there is no space

• Tooltip timing should be - Tooltips (see interaction section) 

• Warning and Error has the same tooltip interaction

...

Content	Examples	Comments
1 or more rows of text right to the icon of validaton
Partial coverage of control		User can still click the control
Left position

Some cases allow the user to auto-correct the entered input - Validation applies in the background.

...

Best Practices

Use field validations for any user input fields

...

• 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

• Try to avoid negative words

  • (e.g. "Password does not meet requirements" or "Invalid Password" → could be turned into→ "Password must contain 8 alphanumeric characters")

Accessibility compliance

...