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

Ask us about anything that’s featured on the Experience Library, or any questions about design, content or development.

#experience-library-support

Co-op Experience Library

Get email updates

Find out about the latest content, changes or developments to the Experience Library.

Sign up

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