TC Design

Error and validation messaging

Owned by Hannah Jolley
Last updated: Aug 21, 2024 by Dan Larmour
5 min read

What is error and validation messaging

Error and validation messaging is the messaging presented to the user to inform them of errors that occurred in a form and provide instructions on how to fix them. Validation is the process of checking that all required fields have been filled out, and the values present meet the formatting constraints. This occurs when the user attempts to submit the form or proceed to the next steps.

If the form did not pass validation and errors were found, error messaging (also known as validation messaging) is then presented to the user. The goal of error messages is not to place the blame on the user but to help them to understand and resolve the error. These messages should be focused on providing the user with meaningful and actionable information.

When to use this component

  • An action requested by the user failed for reasons outside of their control, or for reasons within their control

When not to use this component

  • Do not use for informational, system or status messages that do not involve an action the user took

Best practices

Do

  • Write error messages in plain language that anyone can understand

  • Focus on why the error occurred and how it can be resolved

  • Keep error messages short and to the point. When possible, aim to use a maximum of 8 to 14 words per message

Don’t

  • Don’t use technical jargon like error codes, this does not help users to understand why the error occurred and can result in confusion and frustration

  • Don’t use language that blames the user for errors

  • Avoid using words that don’t add to the message by helping users to understand and resolve the error. Words like “sorry”, “oops”, “invalid” and “prohibited” are not helpful

Templates

Simple error template

Use the simple error message template when an action requested by the user has failed for reasons outside of the their control, or could not be completed due to a single reason within the users control. For example: 

  • Assigning or changing the assignee of a work item

  • Updating the status of a work item

  • Saving or deleting a document or work item

  • Uploading, renaming or deleting an attachment

Template

Template Type

Template

Template Type

Template

Error Message - Simple (EN)

The subject could not be action due to reason, take corrective action.

Error Message - Simple (FR)

Le/ La/ L' subject n'a pas pu ĂŞtre action en raisan reason, take corrective action.

Examples

Scenario

Message (EN)

Message (FR)

Scenario

Message (EN)

Message (FR)

User attempted to assign an application to themselves. The request could not be completed due to an unexpected error.

Application #123456 could not be assigned due to an unexpected error, try again. 

La demande #123456 n'a pas pu être attribuée en raison d'une erreur inattendue, réessayez.

User attempted to upload an attachment. The request could not be completed as the file size was too large.

Attachment AlaskanSunbluecard.pdf could not be uploaded as the file exceeds 50 MB. Reduce the file size and try again.

La pièce jointe AlaskanSunbluecard.pdf n'a pas pu être téléchargée car le fichier dépasse 50 MB. Réduisez la taille du fichier et réessayez.

User attempted to rename an attachment. The request could not be completed as the new name included special characters.

Attachment AlaskanSunbluecard.pdf could not be renamed, enter a name that does not include these special characters: / | \ * < >

La pièce jointe AlaskanSunbluecard.pdf n'a pas pu être renommée, entrez un nom qui ne contient pas ces caractères spéciaux : / | \ * < >

Complex error template

Use the complex error message template when an action requested by the user has failed for multiple reasons within the users control. This error message is most commonly used for forms. Tasks such as manually creating or editing an application or work item require a user to fill out multiples fields. There is a chance the user may not fill out a required field or may enter a value that does not meet the fields formatting constraints, in which case they need to be informed the error(s) occurred and instructed on how to resolve them.

Template

Template Type

Template

Template Type

Template

Error Message - Complex (EN)

The subject could not be action due to # errors:

Error Message - Complex (FR)

Le/ La/ L' subject n'a pas pu ĂŞtre action en raison de # erreurs:

Missing Value - Inline (EN)

Error #: Enter/ select value

Missing Value - Inline (FR)

Erreur #: Entrez/ SĂ©lectionner value

Invalid Format - Inline (EN)

Error #: Enter value in correct format

Invalid Format - Inline (FR)

Erreur #: Entrez value dans correct format

Examples

Scenario

Message (EN)

Message (FR)

Scenario

Message (EN)

Message (FR)

User attempted to create a new work item. The request could not be completed as they did not fill out several required fields.

Work item #12456 could not be created due to 3 errors:

  • Error 1: Enter the applicant’s name

  • Error 2: Enter the applicant's email address

  • Error 3: Select a method of payment

L'élément de travail #12456 n'a pas pu être créé en raison de 3 erreurs:

  • Erreur 1 : Entrez le nom du demandeur

  • Erreur 2 : Entrez l'adresse Ă©lectronique du demandeur

  • Erreur 3 : SĂ©lectionner un mode de paiement

User attempted to edit information associated with an existing work item. The request could not be completed as the values entered into several fields did not meet the formatting constraints.

Work item #459230 could not be updated due to 3 errors:

  • Error 1: Enter an official number in the format CXXXXXXXX

  • Error 2: Enter the applicant’s email address in the format yourname@example.com

  • Error 3: Enter a date of purchase in the past

L'élément de travail #459230 n'a pas pu être mis à jour en raison de 3 erreurs:

  • Erreur 1 : Entrez un numĂ©ro officiel dans le format CXXXXXXXX

  • Erreur 2 : Entrez l'adresse email du demandeur dans le format yourname@example.com

  • Erreur 3 : Entrer une date d'achat dans le passĂ©

User attempted to submit an application for a service. The request could not be completed as required fields were missed and several fields did not meet the formatting constraints.

Your application could not be submitted due to 4 errors:

  • Error 1: Enter your first name

  • Error 2: Enter your phone number in the format XXX-XXX-XXXX

  • Error 3: Select a contact method

  • Error 4: Enter your postal code in the format A1A 1A1

Votre demande n'a pas pu ĂŞtre soumise en raison de 4 erreurs:

  • Erreur 1 : Entrez votre prĂ©nom

  • Erreur 2 : Entrez votre numĂ©ro de tĂ©lĂ©phone dans le format XXX-XXX-XXXX

  • Erreur 3 : SĂ©lectionnez une mĂ©thode de contact

  • Erreur 4 : Entrez votre code postal dans le format A1A 1A1

For more specific examples of error messages, see Error and Validation Messages Guidelines.

Key component features 

Telerik Blazor Validation Component - Overview

Error summary

The Telerik Error Summary component can be used with the complex error text template to present users a list of errors that occurred on the page. This should be used with the Telerik Inline Error Message component.

Blazor Validation Summary Demos - Template | Telerik UI for Blazor 

Inline error message

The Telerik inline error message component can be used to present users with the error relevant to the field where the error occurred. This can be used with the Telerik Error Summary component for complex errors.

Blazor Validation Message Demos - Template | Telerik UI for Blazor 

Examples

Pending: Will add examples of this component implemented in MAACE applications.

Resources

External resources 

Error message - GOV.UK Design System

Error summary - GOV.UK Design System

Error messaging | Ontario Design System

Best 10 Examples and Guidelines for Error Messages - UX Writing Hub

TC Design