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

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.