Real-time error validation occurs while the user is completing a form (examples: using the wrong characters in a numerical field, leaving a required field blank, etc.). The error validation occurs either when the user has stopped typing within the input field, or when the user has clicked or tabbed away from the field or control.
Server-side error validation occurs after a form has been submitted. If an error is detected, the form refreshes and depending on conditions, is either displayed inline, or as a page-level message that cannot be dismissed plus inline callouts.
Asynchronous Errors are detected some time after the related interaction (examples: an email bounced back due to a delivery error, some aspect of the transaction failed permanently, etc.). This type of error is displayed globally as the user may be in a different section of the application when the error is detected.
When to Use
- Use real-time error validation if
- the user has input information that does not meet the requirements of the field or form
- a required field has been left blank
- Use server-side error validation if a problem occurs after the user has submitted a form.
- Use asynchronous error validation if
- there is a delay between the user action and the error (example: email not sent because of delivery error)
- the error is at a global level (example: credit card information is incorrect)
Appearance & Behavior
Real-time error validation
- To draw immediate attention to the error, a red error icon displays next to a red field title. The form field border color becomes red.
- A standard tooltip is triggered on
:focusof the field, or on
:hoverof the icon
- The tooltip can be dismissed by clicking outside the field.
- The tooltip and error state go away when the error is corrected.
Server-side error validation
If your form is simple, short, and fits in a single window (like a sign up form) use only inline callouts (see real-time validation.)
If the error is associated with fields within the page, in-line error messaging is provided at the field or control level and also cannot be dismissed. In this case, the page-level error message displays a generic message about the error state, but relies on the in-line error messaging to communicate the specifics of the error. Page level messages have red outline, with red icon and title inside.
Asynchronous error validation
When Asynchronous Errors are present, the user can still continue using the application normally. They persist at the top of the page as the user navigates within the application, and they push the page contents down until they are dismissed.
Multiple Asynchronous Errors and Alerts may be grouped together and displayed in the Global Error Message. The message should indicate the total number of errors and alerts and allow the user to expand the global area to reveal them.
The corresponding messages appear in-line as an Overlay on the existing page contents. Within the Overlay, messages are grouped by type. Additionally, Asynchronous Errors are given a higher priority and appear first in the list before Passive Alerts. Within each type, messages appear in reverse chronological order.
Users may dismiss each error or alert individually, or dismiss them all by clicking the “Dismiss All” within the Global Error Message.
On mobile devices, error messages remain displayed below the field at all times while the field and label turn red. In addition, if a required field was not provided, the field does not animate closed. Instead, it remains open in the error state further emphasizing that a value is missing. It is recommended to keep error messages short.
When to Use
Use Real-time error validation to draw immediate attention to the error, a red error icon displays to the right of the field.
Use Server-side error validation if something goes wrong after submission, display a modal alert.