Validation
Provide validation feedback to the user with HTML5 form validation or custom form validation.
Usage
The form validation is applied via the CSS pseudo-class :invalid. This pseudo-class applies to all form control elements, input, select and textarea, These form controls must have the required attribute to use the HTML5 pseudo-class styling.
As a fallback, a custom form validation style is available, slb-invalid. This is applied to any form control that needs validation. Applying this to the form control will do different things depending on the control it is placed on. Generally though it will apply a ux-red border to the control, the label will become ux-red and a error message will be displayed below the control element.
The invalid and fallback styling is scoped to only occur when there is a parent class of slb-was-validated, usually applied to the form element. This prevents the validation styling being applied as soon as the page is loaded, this allows the user to active the validation when necessary after the projects validation is complete.
To remove the browsers default feedback, you need to add the novalidate boolean attribute to the form element, although this is not necessary.
HTML5 Validation
The required attribute is needed to make a form control mandatory. The required attribute is placed on the form control element.
Validation against a regular expression with the pattern attribute which expects a regular expression as its value and is used to match character combinations in the validation.
Constraining the length of your entries with minlength and maxlength attributes. A field will return invalid if its value is outside the minimum and maximum values set.
Validation messages
| Input type | Error | Validation message | Examples |
|---|---|---|---|
| Text input | Nothing entered | Label is required |
First name is required |
| Text input | Invalid character | Enter a valid Label using valid characters |
Enter a valid provider name using letters and numbers only |
| Text input | Criteria not met | The criteria Label is value |
The minimum total regular monthly payment is £300 |
| Date input | Criteria not met | Enter a valid Label using criteria |
Enter a valid date of birth using DD-MM-YYYY |
| Dropdown | Nothing entered | Label selection is required |
County selection is required |
| Radio Button | Nothing entered | Label selection is required |
Product selection is required |
| Checkbox | Nothing entered | At least one Label selection is required |
At least one product selection is required |
forms\validate-input.hbs
<form id="validExampleForm" novalidate>
<fieldset aria-label="Name">
<legend class="sr-only">Name details example</legend>
<div class="form-row">
<div class="col-12 col-md-6">
<div class="slb-form__group">
<input type="text" class="slb-form__control-block slb-invalid" id="exampleInputText-formGrid1" required/>
<label class="slb-form__label" for="exampleInputText-formGrid1">First name</label>
<span class="slb-form__validation">First name is required</span>
</div>
</div>
<div class="col-12 col-md-6">
<div class="slb-form__group">
<input type="text" class="slb-form__control-block slb-invalid" id="exampleInputText-formGrid2" required/>
<label class="slb-form__label" for="exampleInputText-formGrid2">Last Name</label>
<span class="slb-form__validation">Last name is required</span>
</div>
</div>
</div>
</fieldset>
<fieldset aria-label="Name">
<legend class="sr-only">Address details example</legend>
<div class="form-row">
<div class="col-12 col-lg-6">
<div class="slb-form__group">
<input type="text" class="slb-form__control-block slb-invalid" id="exampleInputText-formGrid3" required/>
<label class="slb-form__label" for="exampleInputText-formGrid3">City</label>
<span class="slb-form__validation">City is required</span>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="slb-form__group">
<select class="slb-form__control-block slb-invalid" id="exampleInputText-slb-form__control-block" required>
<option value=""></option>
<option value="first">First</option>
<option value="second">Second</option>
<option value="third">Third</option>
</select>
<label class="slb-form__label" for="exampleInputText-slb-form__control-block">Country</label>
<svg class="slb-icon slb-form__icon" viewBox="0 0 320 512" id="caret-down-slb-form__control-block"><title>caret-down</title><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"/></svg>
<span class="slb-form__validation">Country is required</span>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="slb-form__group">
<input type="text" class="slb-form__control-block slb-invalid" id="exampleInputText-formGrid4" required/>
<label class="slb-form__label" for="exampleInputText-formGrid4">Postcode</label>
<span class="slb-form__validation">Postcode is required</span>
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend class="sr-only">Phone Input group example</legend>
<div class="slb-form__group">
<div class="slb-form__control-group">
<div class="slb-form__control-group-prepend slb-form__control-group-prepend--lg">
<span>+44</span>
</div>
<input type="number" class="slb-form__control slb-invalid" id="exampleInputText-slb-form__control" required/>
<label class="slb-form__label" for="exampleInputText-slb-form__control">Input Label</label>
<span class="slb-form__validation">Phone number is required</span>
</div>
</div>
<div class="slb-form__group">
<div class="slb-form__control-group">
<div class="slb-form__control-group-prepend-block slb-form__control-group-prepend--lg">
<span>+44</span>
</div>
<input type="number" class="slb-form__control-block slb-invalid" id="exampleInputText-slb-form__control" required/>
<label class="slb-form__label" for="exampleInputText-slb-form__control">Input Label</label>
<span class="slb-form__validation">Phone number is required</span>
</div>
</div>
</fieldset>
<fieldset aria-label="Name">
<legend class="sr-only">Textarea details example</legend>
<div class="slb-form__group">
<textarea class="slb-form__control-block slb-invalid" id="exampleInputText-slb-form__control-block" rows="3" required></textarea>
<label class="slb-form__label" for="exampleInputText-slb-form__control-block">Input Label</label>
<span class="slb-form__validation">Message is required</span>
</div>
</fieldset>
<fieldset role="radiogroup" aria-label="Radio Example Group">
<legend class="sr-only">Radio example</legend>
<form>
<div class="slb-form__group">
<input type="radio" class="slb-form__control slb-invalid" id="radioButtonExample-slb-form__control-1" name="radioButtonExample-slb-form__control" aria-checked="true" checked="checked" required>
<label for="radioButtonExample-slb-form__control-1" class="slb-form__label">Radio Button</label>
<span class="slb-form__validation">Product selection is required</span>
</div>
<div class="slb-form__group">
<input type="radio" class="slb-form__control-block slb-invalid" id="radioButtonExample-slb-form__control-block-2" name="radioButtonExample-slb-form__control" aria-checked="false" required>
<label for="radioButtonExample-slb-form__control-block-2" class="slb-form__label">Radio Button</label>
<span class="slb-form__validation">Product selection is required</span>
</div>
</fieldset>
<fieldset role="group" aria-label="Checkbox Example Group">
<legend class="sr-only">Checkbox Example Group</legend>
<div class="slb-form__group-inline">
<input class="slb-form__control slb-invalid" type="checkbox" id="exampleCheckbox-slb-form__control-block-1" aria-checked="false" required>
<label class="slb-form__label" for="exampleCheckbox-slb-form__control-block-1">
Checkbox Button
</label>
<span class="slb-form__validation">At least one product selection is required</span>
</div>
<div class="slb-form__group-inline">
<input class="slb-form__control-block slb-invalid" type="checkbox" id="exampleCheckbox-slb-form__control-block-2" aria-checked="false" required>
<label class="slb-form__label" for="exampleCheckbox-slb-form__control-block-2">
Checkbox Button
</label>
<span class="slb-form__validation">At least one product selection is required</span>
</div>
</fieldset>
<fieldset role="radiogroup" aria-label="Radio Example Group">
<legend class="sr-only">Radio Example Group</legend>
<div class="slb-form__group">
<input type="radio" class="slb-form__control-tile slb-invalid" id="radioButtonExample-slb-form__control-tile-1" name="radioButtonExample-slb-form__control-tile" aria-checked="true" checked="checked" required>
<label for="radioButtonExample-slb-form__control-tile-1" class="slb-form__label">
<span class="slb-form__label-heading">Radio tile</span>
<span class="slb-form__label-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, temporibus.</span>
</label>
<span class="slb-form__validation">Product selection is required</span>
</div>
<div class="slb-form__group">
<input type="radio" class="slb-form__control-tile slb-invalid" id="radioButtonExample-slb-form__control-tile-2" name="radioButtonExample-slb-form__control-tile" aria-checked="false" required>
<label for="radioButtonExample-slb-form__control-tile-2" class="slb-form__label">
<span class="slb-form__label-heading">Radio tile</span>
<span class="slb-form__label-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, temporibus.</span>
</label>
<span class="slb-form__validation">Product selection is required</span>
</div>
</fieldset>
<fieldset aria-label="Date">
<legend class="sr-only">Date of birth</legend>
<div class="slb-form__group-inline">
<input type="text" class="slb-form__control-date" id="exampleInputText-slb-form__control-date-dd" placeholder="DD" size="3" required/>
<label class="slb-form__label" for="exampleInputText-slb-form__control-date-dd">Day</label>
<span class="slb-form__validation">Enter a valid date of birth using DD-MM-YYYY</span>
</div>
<div class="slb-form__group-inline">
<input type="text" class="slb-form__control-date" id="exampleInputText-slb-form__control-date-mm" placeholder="MM" size="3" required/>
<label class="slb-form__label" for="exampleInputText-slb-form__control-date-mm">Month</label>
</div>
<div class="slb-form__group-inline">
<input type="text" class="slb-form__control-date" id="exampleInputText-slb-form__control-date-yyyy" placeholder="YYYY" size="5" required/>
<label class="slb-form__label" for="exampleInputText-slb-form__control-date-yyyy">Year</label>
</div>
</fieldset>
<fieldset role="group" aria-label="Checkbox Example Group">
<legend class="sr-only">Checkbox Example Group</legend>
<div class="slb-form__group">
<input type="checkbox" class="slb-form__control-infobox slb-invalid" id="checkboxButtonExample-slb-form__control-infobox-2" aria-checked="false" required>
<label for="checkboxButtonExample-slb-form__control-infobox-2" class="slb-form__label">
<span class="slb-form__label-heading">Checkbox Infobox</span>
<span class="slb-form__label-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, temporibus.</span>
</label>
<span class="slb-form__validation">At least one product selection is required</span>
</div>
</fieldset>
<button id="validExampleShow" type="submit" class="slb-button mt-4">Show Validation States</button>
<button id="validExampleReset" class="slb-button mt-4">Reset Validation States</button>
</form>
Source:
components/forms/_form-validation.scss