Back to the pattern library

Validation

Build services that are flexible enough to allow users to give data in a way that they would naturally. For example we should allow users to enter a postcode in upper or lower case, with or without a space.

Validation errors should only be triggered on mandatory fields. They must be factual and help the user move on.

More detailed information on how to use form patterns can be found in our design guidance.

Example

Example

HTML

<div class="coop-c-message coop-c-message--error" role="alert">
    <h2>There's a problem</h2>
    <p>Check the form. You must:</p>
    <ul>
        <li>Enter your full name</li>
        <li>Enter an email address</li>
    </ul>
</div>
<fieldset>
    <div class="coop-form__row coop-c-form-error">
        <label for="client_name">Your full name</label>
        <p class="coop-c-form-error__text" aria-live="polite">Enter your full name</p>
        <input class="coop-form__input" type="text" value="" name="client[name]" id="client_name">
    </div>
    <div class="coop-form__row coop-c-form-error">
        <label for="client_email_address">
            Your email address
            <span class="coop-label__hint">We'll only use this to contact you about your will.</span>
        </label>
        <p class="coop-c-form-error__text" aria-live="polite">Enter an email address</p>
        <input class="coop-form__input" type="email" value="" name="client[email_address]" id="client_email_address">
    </div>
</fieldset>

SCSS

To use this component in your service add this import in your main SCSS file:

@import 'node_modules/@coopdigital/coop-frontend-components/forms/validation/_validation.scss';

Customise this component by following the guide here.

JS

Design and content

Validation errors should only be triggered on mandatory fields. They must be factual and help the user move on.

Accessibility

We are currently working on this.

For more information see our general guide on accessibility.

Suggest a pattern

Use this form to suggest a new pattern or a change to an existing one.

Suggest a new pattern or a change