Skip to end of banner
Go to start of banner

Field Validation

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this content. View the current version.

Compare with Current View Version History

« Previous Version 6 Next »

 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:

Related items:
 Expand for more info

Types

TypeUsage

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 & Behavior

General guidelines 

In case the error relates to a specific field (unlike an error on the entire form),

  • Before or after submitting the form, mark the field and show the error details:
    • In most cases the validation will occur after the user left the field.
    • In some fields the error should pop while typing, (e.g. illegal character was typed in a field).
    • In case the error relates to the entire form, the error will appear next to the submit button.

Applies to the following fields:

Other use cases 

  • In case of success Use the system message (e.g. after pressing "save" button and the user remains in the form)
    • In general, any place where the user might get confused or request to address a complex input, a system message is advised

Structure

The field validation message consists of:

  • Red frame & a Small X icon on the top right corner - marks the errored field.
  • An error message appears above the field.
  • A descriptive message next to the submit button (which is 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).

Applies to the following fields:


What






A dynamic informative text (with visual indication) appears:

While the user interacts with the fields*: (Providing they have an input method)




Text field



Text area



Combo button (free text field)



Spinner (free text field)



Date Picker (free text field)



Time Picker (free text field)



Checkbox group



Grid table cell

Tab


*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

StateExplanation
Non-activeAs long as there is no error in the page
Active in a short formWill not display a message next to the submit button (but it will be disabled)
Active on a long formWill display a message as well as the red frame, X, etc
Active on connected fieldsIf the field is connected to a graph of another element

Interaction

  • On a field that allows any value entry, the error will appear as soon as the user leaves the field.
  • If the field allows a certain type of value (EX: numeric), the error will appear as soon as the first invalid note is entered.
  • 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 and the value will be restored to the last valid value.


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



 General guidelines

  • 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")

       

  • Specify why field info was not accepted - your error messages should tell users exactly why their information got rejected

  • Avoid too much information - your messages should be clear and to the point


Rephrasing examples 

The table presents different examples for content text (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



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:

  1. User select an option or type in a field
  2. Once a user finished his interaction with the field and validation recognized an issue:
    1. The component will receive error indication (red frame, and error icon)
    2. Tooltip will appear (only on the first error field, and it will disappear on the next mouse out / field focus on another component).
    3. 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.)
  3. While the field is in an invalid state (see bullet 2)
    1. Mouse over the indication icon will display a tooltip immediately (no delay) for maximum duration.
    2. If user changes field status (e.g. continues editing)
      1. 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)
      2. 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:

  1. Once a user typed an illegal character in a field:
    1. The component will receive error indication (red frame, and error icon) 
    2. Tooltip will appear with a contextual error message (specifically describe the error and what should be done)
      EX:"Please enter only numbers"  
    3. 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.)
  2. 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.






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:

  1. The user inputs invalid value and a tooltip + red frame appears immediately.
  2. 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:

  1. Tool tips will appear next to each one of the error fields.
  2. 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.


New LUX design 



  • No labels