Spectrum

Version 1.0.0

Form errors

Form errors happen when the system encounters invalid inputs, and they persist until resolved. Responsible form design offers users contextual and relevant information for correcting any errors in order to meet the necessary input criteria.

Example of a form with a single input error. First text field, label Street address. Input text, 1234 Spectrum Way. Next text field, label City, with nothing input and field highlighted in red and error icon. Error message, Enter a city name. Next text field, Zip code. Input text, 94114. Next, a picker, label Country, selected value United States.

Table of contents#

Types of form errors
Types of form validation
Usage guidelines
Content standards
Changelog

Types of form errors#

There are two types of form errors: single input and group input. The type impacts how the error is triggered and displayed.

A single input error affects only one component. A group input error reflects that there are errors with several components, and the errors are aggregated into a single message.

Single input error#

The most common type of form error delivery is through the usage of help text on input components. Some examples of this include text field, text area, radio group, checkbox group, picker, and combo box. Any input component could potentially trigger an error with an invalid input. Errors must be resolved before a user can move forward and successfully complete the form.

When an error message occurs, it will switch help text with error text on an input. Follow Spectrum’s guidelines for writing the error message and think about how to write error messages that show a solution. Thoughtful error message design helps users resolve problems quicker and move forward with less frustration.

Group input error#

When multiple input errors occur on a page, an in-line alert aggregates the error messages and increases visibility. Place this alert at the top of the page or section of a form. It can be used alongside single input errors.

If an in-line alert is shown with multiple single input errors, it will persist until all errors have be resolved.

Types of form validation#

There are two ways for how a form can be validated. Either is acceptable, depending on user needs and product use cases.

Validation through submission#

The most common type of form validation occurs when the user submits their inputs — often by selecting a button with a “submit” action label — and the form gets processed on the backend. If there’s any invalid inputs, then the system will return input errors.

Validation in real time#

Another type is validation in real time, where the form does not need to be submitted to return any input errors. Errors that appear in real time should not be shown until the user is done typing.

Here's a step-by-step example of how validation happens in real time:

Empty text field (default state)
User types an input (text field in focus)
User clicks outside of text field and an error occurs because the input is invalid (text field not in focus)
The error message and icon remain while the user resolves the error (text field in focus)
As the input becomes valid, the error resolves in real time (text field is still in focus)

Usage guidelines#

Don’t show input errors until the user is done typing#

For real time validation, make sure that the user is completely finished entering information before showing any input errors. Showing an error before being done with typing is frustrating and confusing.

Example of how not to show an input error. A user begins to type in a text field, label Email address. As they start to input text, the field is immediately shown as an error because the required formatting is not input. The field is highlighted as an error and an error message appears, text Enter your email address.

Use a “(required)” or “(optional)” label consistently throughout a form to help prevent errors in the first place#

In a single form, mark only the required fields or only the optional fields, depending on whichever is less frequent in the entire form.

If most of the fields are optional, only the required fields should be give an asterisk icon or have labels appended with “(required)”. If most of the fields are required, only the optional fields should be appended with “(optional)”. Never use an asterisk icon to note that a field is optional.

Key example of correct way to show which items in a form are required or optional. 3 text fields in a form. First text field, label First name, input text, Lisa. Second text field, label Last name, input text, Wilson. Third text field, label Email address (optional). Input text, wilson@adobe.com. Only the third text field is optional, so it is marked as such.

Key example of incorrect way to show which items in a form are required or optional. 3 text fields in a form. First text field, label First name (required), input text, Lisa. Second text field, label Last name (required), input text, Wilson. Third text field, label Email address. Input text, wilson@adobe.com. Since both the first and second field are required and there are three fields total, this is not the correct form design.

Content standards#

Write specific and helpful error messages using help text#

Communicate error messages in a human-centered way by guiding a user and showing them a solution — don’t just state what’s wrong and then leave them guessing as to how to resolve it. Ambiguous error messages can be frustrating and even shame-inducing for users. Also, keep in mind that something that a system may deem an error may not actually be perceived as an error by a user.

For help text, usually the error is related to something that needs to be fixed for in-line validation, so a helpful tone is most appropriate. For example, if someone were to miss filling out a required field that asks for their email address, write the error message like you’re offering a hint or tip to help guide them to understand what needs to go in the missing field: “Enter your email address.”

Learn how this applies to help text for text field, text area, combo box, and picker.

Key examples of correct ways to write specific and help error messages with help text. 2 required text fields, both blank. First text field, label Credit card number. Error message, Enter your credit card number. Second text field, label Password. Error message, Create a password with at least 8 characters.

Key examples of incorrect ways to write error messages with help text. 2 required text fields, both blank. First text field, label Credit card number. Error message, Invalid field. Second text field, label Password. Error message, Password requirements not met!

Write an in-line alert message as a high-level summary#

When aggregating error messages into an in-line alert, give a high-level summary of what the issue is with the form. Don’t point out each and every field that needs to be addressed; this is a security risk.

Key example of a correct way to write an in-line alert message as a high-level summary. In-line alert title, Unable to process payment. Description, There was an error processing your payment. Please check that your credit card information is correct, then try again.

Key example of an incorrect way to write an in-line alert message, which is too specific. In-line alert title, There’s issues with your credit card. Description, Please fix the following errors before continuing. A bulleted list, 3 lines, Card number, Expiration date, Billing zip code.

Keep error messages brief and informative#

Forms are utilitarian, and not a place to be overly emotive. When an error happens, just tell the user what’s happening and what they can do to resolve the error to complete the form. View Writing for errors for more guidelines on crafting human-centered error messages.

Key example of correct way to write an error message for an input error. Text field, label Email address, input text Wilson@. Field is highlighted in red with a red error icon. Error message text, Enter your email address.

Key example of incorrect way to write an error message for an input error. Text field, label Email address, input text Wilson@. Field is highlighted in red with a red error icon. Error message text, Oops! Invalid email address!

Changelog#

Date	Number	Notes
Jun 01, 2022	1.0.0	This item has been added to the website

Cards

Headers