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:

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.

Are your personal details correct and up-to-date? Error message about personal details goes here

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

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

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

      <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:

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="group" aria-labelledby="error-summary-heading-example-2" tabindex="-1">

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

      <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

Discuss error messages and validation on the design patterns Hackpad