Forms: error messages
-
Form error messages inform users that there is a validation error with the information they have provided.
-
Please see the form template to get started with creating your own forms and error messages.
- Errors are displayed in an error summary at the top of the form and under each input field where an error has occurred.
.png)
.png)
- Always include error messages when an error occurs that the user can fix.
- Always include an error message summary at the top of the page and error messages at each text input field with an error.
- Do not tell users they are not eligible in an error message.
- Do not use error messages to tell the user there is a problem they cannot fix.
- Summarize errors at the top of the page in the following format: Error number: Summary of error using the statements below.
- Indicate the error message under its respective input field – whether text input, text area, checkboxes, or radio buttons.
- Error message should explain how the user can fix the issue.
- For inline error text with a long character count, you can break up the text into 2+ lines by hitting the enter key
- Otherwise, error messages should not be customized - please maintain the styling and colours.
Use the following statements for error messages:
If an input is missing:
[Field] is required.
If the format is incorrect:
Enter [Field] in format [insert example of correct format].
If the input does not meet the specified criteria:
[Field] must include [enter criteria].
If the input is not valid:
A valid [enter input] is required for [field].
If the error message you are looking for does not belong in the list above, remember these best practices when writing error messages:
- Use clear and concise language.
- Explain how to fix the error.
- Don’t blame the user.
- Use a polite tone.
At the input field error include the word "Error" before each explanation so that screen readers will read "Error: explanation of error."
If there is an error with the page and not the input provided by the user see HTTP Error Pages
We added this component to the Extended GC Design Library - DECD, as it did not exist in the canada.ca design system or the Core GC Design Library. We followed best practices and aligned with existing canada.ca patterns to create this component.