Skip to Main Content

Validation Messaging Guide

Main Takeaways

Giving validation feedback is an emotional process. Support users with this process by following these guidelines:

  • Explain what the Input expects before the user enters data. (Example: password rules, ranges, etc)
  • Give clear and helpful feedback when encountering a problem.
  • Use a combination of placement, timing, and language to guide users through moments of uncertainty.
Anatomy of Input validation with numbers pointing to each part: placement, timing, and language.

Placement

  • Place messaging close to the Input. Spark places validation directly under the Input.
  • Provide a clear visual to indicate something has gone wrong with user Input and needs attention.
  • Plan error messaging for every field.
  • On forms with multiple fields, show validation messaging for each Input field to guide users to a successful submission.

Timing

  • Show validation messaging after the user enters the data or when the Input becomes out of selection focus.
  • On forms, show error messaging before the user submits the form.

Selection focus changes when a user taps or clicks anywhere outside of the current focused element. Focus can also change through keyboard navigation.

Language

  • Use labels and helper text to clarify what data the Input expects. Messaging should be related and relevant to the Input.
  • Deliver direct and concise statement of the problem in non-technical terms. Write out abbreviations.
  • Use sentence case. Do not use all caps.
  • Direct users to the next action to solve the problem.
    • Use positive action verbs, rather than negative ones. Focus on the solution by explaining what to do, opposed to what not to do.
    • If the “error” is a system condition that blocks the user from accomplishing a task, offer them a way to be notified of updated system status.
  • Follow accessibility guidelines, and where applicable, use aria-live regions.

Examples

Use error messaging to clarify any system errors and additional constraints to the user.

  • Choose a T-shirt size. (Example: Radio Input, Dropdown)
  • Choose at least one of the options. (Example: Checkbox)
  • Enter your first name. (Example: Text Input)
  • Enter an amount that is less than your current balance of $19,800. (Example: Monetary Input)
  • Enter a date within the past 99 years. (Example: data Input constraint)
  • Enter your 9-digit Social Security Number.
  • Create a password that meets the following criteria:
    • It has at least 8 characters.
    • Contains a number.
    • Contains a special character.

The guides are not all-inclusive in regard to accessibility considerations. Refer to the Web Content Accessibility Guidelines (WCAG 2.1, Level AA) for additional insights.