Last reviewed: 31 Aug 2021

Patterns

Form validation

Validation can stop the submission of data. This pattern tells a person that this has happened through errors messages, and the action they need to take to fix it.

Guidelines

Only activate validation on mandatory fields.

Validation messages must:

  • be specific about what the user needs to do fix the error, for example, ‘enter the amount of hours worked in whole numbers’, not ‘hours entered invalid’
  • start with an action, for example, ‘enter’ or ‘select’
  • be written in plain English
  • contain the minimum amount of information the user needs to fix the error
  • make sense when read out of context, for example, ‘enter your full name’, not ‘fill in the input'

The validation pattern is made up of an:

  • error summary at the top of the page
  • error message above the input

The error messages listed in bullet points in the error summary start with a lower case letter.

The error messages above the input start with a capital letter.

Neither end with a full stop.

Example

Your details

We’ll only use this to contact you about your will

Your password must be at least 8 characters and include a capital letter, a symbol and a number.

Changelog for this page

Date Notes
31 Aug 2021 First version of page published

Get support

Co-op Digital colleagues can get support in our dedicated Slack channel:

#experience-library-support

Sign up for email updates

Get updates about changes and developments.

Sign up

Copyright © Co-operative Group Limited. All rights reserved.