Form errors

Version 1.0.0

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.
DateVersionSpectrumJun 01, 20221.0.0Download

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.

Example of a single input error. A required text field, label Password, with help text: Password must be at least 8 characters. This text field, when there’s an input error, is highlighted in red and includes a red error icon, with an error message also in red: Create a password with at least 8 characters.

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.

Example of a form with a group input error, where an in-line alert aggregates single input error messages into a single notification. First form section, label payment. In-line error, 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. All inputs are in the error state in this section. First picker, label Available payment methods, selected option Credit or debit card. Next picker, label Expiration month, selected option February. Next picker, label Expiration year, selected option 2020. Next field, label Name as it appears on your card, input text, Johnny Appleseed. Next form section, label Billing address. First text field, label Street address, input text 1234 Spectrum Way. Next text field, label City, input text San Francisco. Next text field, label Zip code, input text 94114. Next, a picker, label Country, selected option United States.

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.

​​Example of a form that does validation through submission. First form section, label payment. First picker, label Available payment methods, selected option Credit or debit card. Next picker, label Expiration month, selected option February. Next picker, label Expiration year, selected option 2027. Next field, label Name as it appears on your card, input text, Johnny Appleseed. Next form section, label Billing address. First text field, label Street address, input text 1234 Spectrum Way. Next text field, label City, no input, an in-line error message, Enter a city name. Next text field, label Zip code, input text 94114. Next, a picker, label Country, selected option United States. Two buttons, primary action Submit, secondary action, Cancel.

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.

Animation showing an example of validation in real time. A user starts to type in text field, label Email address. As they navigate away from the field before the correct email address formatting is input, the field is highlighted as an error and an error message appears, text Enter your email address.

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:

  1. Empty text field (default state)
  2. User types an input (text field in focus)
  3. User clicks outside of text field and an error occurs because the input is invalid (text field not in focus)
  4. The error message and icon remain while the user resolves the error (text field in focus)
  5. 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.

dont
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.

do
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.
dont
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.

do
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. ​
dont
​​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.

do
​​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.
dont
​​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.

do
​​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.
dont
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#

DateNumberNotesJun 01, 20221.0.0
  • This item has been added to the website