Expand for table of Content

Description

ONGOING

Field Validations are a way of talking to our users. It is designed to make the user understand a mistake and the ways to correct it.

Example:

Types

Type	Usage
Field validation error	Alerting the user on actions that will not allow him to complete the task.
Field validation warning (add link here)	Alerting the user on actions that might contain a mistake or a non fatal error.

Usage & Behaviour

Internal Logic

On fields, triggering the validation can occur before or after submitting the form:

In most cases the validation will occur after the user left the field
In some fields the validation should be displayed while typing
- illegal character was typed (e.g. numbers instead of alpha-betic)
- exceed the number of characters (e.g. user input 3 digit number where only 2 digit is allowed)
If the field value is connected to another value in the system, on top of the behavior described above, as soon as the user try's to leave the field, a pop up message will appear with the option of Cancel or Revert to the last valid value.
<<TBD - picture of pop-up>>

Once user is editing a field with a validation indication on it, the indication will be removed (will be treated as if the user had edited the field for the 1st time).
<<TBD animation - show with at spinner field for ease of creating>>

If user had entered a form/page/screen for the first time, validation should not be enabled. in cases where he enters a page that already had input, the validation should be displayed (e.g. the user enters a page already edited with warnings in it)

Structure

The field validation message consists of:

Color frame or & a Small icon on the top right corner - marks the validation type.
A validation message appears upon hover.
A descriptive message next to the submit button (which may be disabled while there is a pending error in the page).
A pop up message that appears in case the field is connected to other fields (and tells the user that the previous value will be restored)

Examples

Components		Error	Warning
Text field
Text area
Combo button (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	<<TBD - Add in LUX>>
Call To Action with short text		on Error validation button is disabled
Call to action with long text. Pop-up size might need to expand in height
*or any other controls that require user input and needs to be validated. What Not: inputs that have default selection only (e.g. radio buttons or some dropdown menus) inputs that does not have text entry option, (when selection is done from a dropdown for example, we need to limit his selectable options to be only the valid ones)

States

State	Explanation
Non-active	As long as there is no error/warning in the page (Validation is OK)
Active in a short form	Will not display a message next to the submit button
Active on a long form	Will display a message as well as the indications (Frame color, tooltip)
Active on connected fields	If the field is connected to a graph of another element

Text

Specify why field info was not accepted - your validation messages should tell users exactly why their information got rejected or may have some risk
Keep it short

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.
<<#found an error message - add it here>>

Interaction - tooltips

Any field/tab that has validation indication will also have a tooltip
The validation tooltip takes priority over a any other tooltip (if exists)
Location of tooltip is by default on right of the field except when there is no space
Text should be kept short and up to 2 rows
Tooltip timing should be
Warning and Error has the same tooltip interaction

Tooltips examples:

type	Examples	Comments
1 row text
2 row text
Partial coverage of control		User can still click the control
Left position

Best Practices

Content Guidelines

2 options for content of the error message:
- Pre-defined
  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
  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.
  (e.g. zip code cannot contain the spacial character: "%"
For complicated fields an example in the text 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

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

Should be A11y complied

Design

Zeplin link	Screen thumbnail
https://app.zeplin.io/project/5970b366bee38cf87b2de932/screen/5baca0fa7044c49e813fe220
https://app.zeplin.io/project/5970b366bee38cf87b2de932/screen/5baca11066034667cc35f576

Code

<<a box containing the code - discuss with Femi>>

Related items:

Expand for more info

System Message

Current appearances in our products

WFM specific use-cases

Edge case

In case the form submit button is away from the form and so there is no way to place a message next to the submit button in order to indicate why it is disabled (EX: the save button is in the ribbon and the fields are in the right pane), you can use the pre-calculated field method:

The user inputs invalid value and a tooltip + red frame appears immediately.
If the user does not correct the value in the field, and he clicks on anything that changes the focus from that field, a pop up will appear that will state the error in the same way it was written in the short message above the form + the sentence:"Restored last valid value". in this case he will have 2 buttons ok and cancel (so the user won't lose all the data he inputed).

Guy Hivroni (Unlicensed): can you please add a design of the pop up and also a screen that contains a right pane form with a save button

Edge case 2

In case multiple values were pasted into multiple fields and some of them are invalid:

Tool tips will appear next to each one of the error fields.
As soon as the user changes the focus, a pop up will appear that will state the error in the same way it was written in the short message above the form + the sentence:"Restored last valid value". and all values even legal ones will be restored to their previous value.

To Delete - when finished

Design

Validation on a Specific field


Appearance
As a red frame with an icon indication on the error field, and an error description on mouse over. See Zeplin link: https://zpl.io/25rljxj







Next to the page / form submit button. The form submit button will become disabled at this point.



Behavior - After typing Shortly after the user had finished interacting with a field: User select an option or type in a field Once a user finished his interaction with the field and validation recognized an issue: The component will receive error indication (red frame, and error icon) Tooltip will appear (only on the first error field, and it will disappear on the next mouse out / field focus on another component). A short message will appear above the form submit button (Note: on cards and very short forms there is no need for the Error message since the form is short and there is no worry that the user might miss the error message.) While the field is in an invalid state (see bullet 2) Mouse over the indication icon will display a tooltip immediately (no delay) for maximum duration. If user changes field status (e.g. continues editing) all invalid indications (red frame and icon) will disappear, including tooltip. Note: in fields that received the error after the form submit, the error indication will disappear when the user starts editing it, and will remain unmarked (at least until the next time the user submits the form) See Bullet 2.		A text field with red frame and icon indication: Mouseover the field, displays a tooltip above the icon:
Behavior - While Typing Same as after typing except the error pops up while the user types		Error in field while typing, will be used in cases of: typing illegal characters more then the maximum characters allowed in a field
Behavior - While Typing on connected pre-calculated fields In case the input of one field will affect other fields and might cause long calculations: Once a user typed an illegal character in a field: The component will receive error indication (red frame, and error icon) Tooltip will appear with a contextual error message (specifically describe the error and what should be done) EX:"Please enter only numbers" A short message will appear above the form submit button (Note: on cards and very short forms there is no need for the Error message, since the form is short and there is no worry that the user might miss the error message.) While the field is in an invalid state, leaving it by hitting tab or enter or clicking on any other element that will take the focus outside the error field will pop up a tooltip that will state the error in the same way it was written in the short message above the form + the sentence:"Restored last valid value". this message will appear for 8 seconds.