Components Form validator

Use the Form Validator component to validate forms without a server-side round-trip while also conforming to the established standards set out in the GOV.UK Design System.

<div tabindex="-1" role="group" id="errorSummary" class="govuk-error-summary hmcts-hidden" aria-labelledby="error-summary-title" data-module="error-summary">

</div>

<h1 class="govuk-heading-xl">Your details</h1>

<form novalidate>

<div class="govuk-form-group">
<label class="govuk-label govuk-label--m" for="email">
  Email
</label>

<input class="govuk-input" id="email" name="email" type="text">
</div>

<div class="govuk-form-group">
<label class="govuk-label govuk-label--m" for="password">
  Password
</label>

<input class="govuk-input" id="password" name="password" type="text">
</div>

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

<fieldset class="govuk-fieldset">

  <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">

    Location

  </legend>

  <div class="govuk-radios">

    <div class="govuk-radios__item">
      <input class="govuk-radios__input" id="location" name="location" type="radio" value="england">
      <label class="govuk-label govuk-radios__label" for="location">
        England
      </label>

    </div>

    <div class="govuk-radios__item">
      <input class="govuk-radios__input" id="location-2" name="location" type="radio" value="scotland">
      <label class="govuk-label govuk-radios__label" for="location-2">
        Scotland
      </label>

    </div>

    <div class="govuk-radios__item">
      <input class="govuk-radios__input" id="location-3" name="location" type="radio" value="wales">
      <label class="govuk-label govuk-radios__label" for="location-3">
        Wales
      </label>

    </div>

    <div class="govuk-radios__item">
      <input class="govuk-radios__input" id="location-4" name="location" type="radio" value="northern-ireland">
      <label class="govuk-label govuk-radios__label" for="location-4">
        Northern Ireland
      </label>

    </div>

  </div>
</fieldset>

</div>

<div class="govuk-form-group">
<fieldset class="govuk-fieldset" aria-describedby="dob-hint" role="group">

  <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">

    Date of birth

  </legend>

  <span id="dob-hint" class="govuk-hint">
    For example, 31 3 1980
  </span>

  <div class="govuk-date-input" id="dob">

    <div class="govuk-date-input__item">
      <div class="govuk-form-group">
        <label class="govuk-label govuk-date-input__label" for="dob-day">
          Day
        </label>

        <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-day" name="dob-day" type="number" pattern="[0-9]*">
      </div>
    </div>

    <div class="govuk-date-input__item">
      <div class="govuk-form-group">
        <label class="govuk-label govuk-date-input__label" for="dob-month">
          Month
        </label>

        <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-month" name="dob-month" type="number" pattern="[0-9]*">
      </div>
    </div>

    <div class="govuk-date-input__item">
      <div class="govuk-form-group">
        <label class="govuk-label govuk-date-input__label" for="dob-year">
          Year
        </label>

        <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-year" name="dob-year" type="number" pattern="[0-9]*">
      </div>
    </div>

  </div>
</fieldset>

</div>

<button type="submit" class="govuk-button" data-module="govuk-button">
Save and continue
</button>

</form> 
{% from "input/macro.njk" import govukInput %}
{% from "radios/macro.njk" import govukRadios %}
{% from "date-input/macro.njk" import govukDateInput %}
{% from "button/macro.njk" import govukButton %}

<div tabindex="-1" role="group" id="errorSummary" class="govuk-error-summary hmcts-hidden" aria-labelledby="error-summary-title" data-module="error-summary">

</div>

<h1 class="govuk-heading-xl">Your details</h1>

<form novalidate>
{{ govukInput({
label: {
  text: "Email",
  classes: 'govuk-label--m'
},
id: "email",
name: "email"
}) }}

{{ govukInput({
label: {
  text: "Password",
  classes: 'govuk-label--m'
},
id: "password",
name: "password"
}) }}

{{ govukRadios({
idPrefix: "location",
name: "location",

fieldset: {
  legend: {
    text: "Location",
    classes: 'govuk-fieldset__legend--m'
  }
},
items: [
  {
    id: 'location',
    value: "england",
    text: "England"
  },
  {
    value: "scotland",
    text: "Scotland"
  },
  {
    value: "wales",
    text: "Wales"
  },
  {
    value: "northern-ireland",
    text: "Northern Ireland"
  }
]
}) }}

{{ govukDateInput({
id: "dob",
namePrefix: "dob",
fieldset: {
  legend: {
    text: "Date of birth",
    classes: 'govuk-fieldset__legend--m'
  }
},
hint: {
  text: "For example, 31 3 1980"
}
}) }}

{{ govukButton({
text: "Save and continue"
}) }}
</form> 

You can configure this component using the Nunjucks macro arguments

When to use this component

Use this when sorting is needed to help find data within a large table of data. This might be useful in combination with the filter pattern.

How it works

In alignment with established GOV.UK Design System standards:

  • validation is performed on submit. Forms should never be validated as the user types or blurs the field.
  • when the form is submitted with errors, focus moves to the error summary; errors are shown above the field and the <title> is prefixed with the error count.
  • submit buttons are never disabled.

Research on this component

To be added.

Get in touch

If you’ve got a question, idea or suggestion share it in #design-system channel on Slack or email the Design System team on design-sytem@hmcts.net