Back to Snippets List

form - Form Error Multiple Show Errors

Message to alert the user to a problem goes here

Optional description of the error(s) and how to correct them

Your personal details

<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 error(s) 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 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" id="error-message-full-name">Error message about full name goes here</span>

  </label>

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

<div class="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, 'VO 12 34 56 D'.
    </span>
    <span class="error-message" id="error-message-ni-number">
      Error message about National Insurance number goes here
    </span>

  </label>

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

</div>

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