GOV.UK elements Errors and validation

Minimise the number of errors on a page.

Contents:

Ask one question per page

Recovering from errors can be hard for users, especially if a page contains multiple errors.

Simplify forms by rewriting and where possible, splitting long forms across multiple pages - with each page asking a single question.

Summarise errors at the top of the page

You must:

• show an error summary at the top of the page
• include a heading to alert the user to the error
• link to each of the problematic questions

Additionally, you should reflect that there's been an error in the <title> by prefixing the existing title with "Error: ". That will make sure screen readers are alerted to there being an error as soon as possible.

Error message and summary box

Message to alert the user to a problem goes here

Optional description of the errors and how to correct them

Check your personal details

Look at your name, signature and other details.

  
    <div class="grid-row">
  <div class="column-two-thirds">

    <div class="error-summary" role="alert" aria-labelledby="error-summary-heading-example-1" tabindex="-1">

      <h2 class="heading-medium error-summary-heading" id="error-summary-heading-example-1">
        Message to alert the user to a problem goes here
      </h2>

      <p>
        Optional description of the errors and how to correct them
      </p>

      <ul class="error-summary-list">
        <li><a href="#example-personal-details">Descriptive link to the question with an error</a></li>
      </ul>

    </div>

    <h1 class="heading-large">
      Check your personal details
    </h1>

    <p>
      Look at your name, signature and other details.
    </p>

    <form>
      <div class="form-group form-group-error">
        <fieldset>

          <legend id="example-personal-details">

            <span class="form-label-bold">
              Are your personal details correct and up-to-date?
            </span>
            <span class="error-message">
              Error message about personal details goes here
            </span>

          </legend>

          <div class="multiple-choice">
            <input id="personal_details_yes" type="radio" name="personalDetails" value="Yes">
            <label for="personal_details_yes">Yes, my personal details are correct</label>
          </div>

          <div class="multiple-choice">
            <input id="personal_details_no" type="radio" name="personalDetails" value="No">
            <label for="personal_details_no">No, some details are wrong or have changed</label>
          </div>

        </fieldset>
      </div>

      <input class="button" type="submit" value="Continue">

    </form>

  </div>
</div>

  

The error summary must appear at the top of the page, so it is visible when the page is refreshed and is immediately read out by assistive technology.

Highlight errors in forms

For each error:

• write a message that helps the user to understand why the error occurred and what to do about it
• put the message in the <label> or <legend> for the question, after the question text, in red
• use a red border to visually connect the message and the question it belongs to
• if the error relates to specific text fields within the question, give these a red border as well

For red, use the $error-colour Sass variable – find this in the GOV.UK frontend toolkit colours.scss file.

Message to alert the user to a problem goes here

Optional description of the errors and how to correct them

Your personal details

  
    <div class="grid-row">
  <div class="column-two-thirds">

    <div class="error-summary" role="alert" aria-labelledby="error-summary-heading-example-2" tabindex="-1">

      <h2 class="heading-medium error-summary-heading" id="error-summary-heading-example-2">
        Message to alert the user to a problem goes here
      </h2>

      <p>
        Optional description of the errors and how to correct them
      </p>

      <ul class="error-summary-list">
        <li><a href="#example-full-name">Descriptive link to the question with an error</a></li>
        <li><a href="#example-ni-number">Descriptive link to the question with an error</a></li>
      </ul>

    </div>

    <h1 class="heading-large">
      Your personal details
    </h1>

    <div class="form-group form-group-error">

      <label for="example-full-name" id="error-full-name">

        <span class="form-label-bold">Full name</span>
        <span class="form-hint">As shown on your birth certificate or passport</span>
        <span class="error-message">Error message about full name goes here</span>

      </label>

      <input class="form-control form-control-error" id="example-full-name" type="text" name="fullName" value="">
    </div>

    <div class="form-group form-group-error">

      <label for="example-ni-number" id="error-ni-number">

        <span class="form-label-bold">National Insurance number</span>
        <span class="form-hint">
          It’s on your National Insurance card, benefit letter, payslip or P60.
          <br>
          For example, ‘QQ 12 34 56 C’.
        </span>
        <span class="error-message">
          Error message about National Insurance number goes here
        </span>

      </label>

      <input class="form-control form-control-error" id="example-ni-number" type="text" name="niNo" value="">

    </div>

    <input class="button" type="submit" value="Continue">

  </div>
</div>

  

Examples

• form validation - single question with radio buttons
• form validation - single question with text field
• form validation - single question with additional guidance
• form validation - multiple questions

Discuss error messages and validation on Dropbox Paper