Cookies on MoJ Design System

We’d like to use analytics cookies so we can understand how you use the service and make improvements.

Skip to main content

Archive Form validator

Important

This component is archived

This component is not sufficiently accessible to be used in live services.

You must validate forms on the server-side. If you require client-side validation, start with native browser form validation. For more complex validation, use an accessible validation library.

Open this example (Form validator (example)) in a new window 
<div tabindex="-1" role="group" id="errorSummary" class="govuk-error-summary moj-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-!-font-weight-bold" 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-!-font-weight-bold" for="password">
      Password
    </label>

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

  </div>

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

    <fieldset class="govuk-fieldset">

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

        Where do you live?

      </legend>

      <div class="govuk-radios" data-module="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" role="group" aria-describedby="dob-hint">

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

        What is your date of birth?

      </legend>

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

      <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="text" inputmode="numeric">

          </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="text" inputmode="numeric">

          </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="text" inputmode="numeric">

          </div>
        </div>

      </div>

    </fieldset>

  </div>

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

</form>


{%- from "govuk/components/input/macro.njk" import govukInput -%}
{%- from "govuk/components/radios/macro.njk" import govukRadios -%}
{%- from "govuk/components/date-input/macro.njk" import govukDateInput -%}
{%- from "govuk/components/button/macro.njk" import govukButton -%}

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

</div>

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

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

  {{ govukInput({
    id: "password",
    name: "password",
    type: "password",
    label: {
      text: "Password",
      classes: 'govuk-!-font-weight-bold'
    }
  }) }}

  {{ govukRadios({
    idPrefix: "location",
    name: "location",
    fieldset: {
      legend: {
        text: "Where do you live?",
        classes: 'govuk-fieldset__legend--s'
      }
    },
    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: "What is your date of birth?",
        classes: 'govuk-fieldset__legend--s'
      }
    },
    hint: {
      text: "For example, 31 3 1980"
    }
  }) }}

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

const validator = new MOJFrontend.FormValidator(document.forms[0]);
validator.addValidator('email', [{
  method: function(field) {
    return field.value.trim().length > 0;
  },
  message: 'Enter your email address'
}, {
  method: function(field) {
    return (field.value.indexOf('@') > -1);
  },
  message: 'You need to enter the ‘at’ symbol in your email address'
}]);
validator.addValidator('password', [{
  method: function(field) {
    return field.value.trim().length > 0;
  },
  message: 'Enter your password'
}, {
  method: function(field) {
    return field.value.length > 8;
  },
  message: 'Your password must contain at least 8 characters'
}, {
  method: function(field) {
    return /\d/.test(field.value);
  },
  message: 'Your password must contain at least one number'
}]);
validator.addValidator('location', [{
  method: function(field) {
    return field.value.trim().length > 0;
  },
  message: 'Select your location'
}]);
validator.addValidator('dob-day', [{
  method: function(field, params) {
    return (params.day.value.length !== 0 && params.month.value.length !== 0 && params.year.value !== 0);
  },
  message: 'Enter your date of birth',
  params: {
    day: document.getElementById('dob-day'),
    month: document.getElementById('dob-month'),
    year: document.getElementById('dob-year')
  }
}, {
  method: function(field, params) {
    var d = new Date(parseInt(params.year.value, 10), parseInt(params.month.value, 10) - 1, parseInt(params.day.value, 10) - 1);
    return d instanceof Date && !isNaN(d);
  },
  message: 'Enter a valid date of birth',
  params: {
    day: document.getElementById('dob-day'),
    month: document.getElementById('dob-month'),
    year: document.getElementById('dob-year')
  }
}]);

When to use

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.

How to use

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.