Archive Form validator
- HTML (Form validator (example))
- Nunjucks (Form validator (example))
- JavaScript (Form validator (example))
<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.