Validation and Errors
How we should handle form validation and errors.
How to use this component
Validation
Ideally all form inputs will be validated in real time to ease form completion. For example if a form requires an email address then the front end logic should validate the data on input.
Likewise if an input requires a certain format, for example a bank sort code must be input as 00-00-00. Then we should either:
- automatically insert the dashes on input,
- allow any format (with or without dashes) and adjust using regex on submit,
- or if must, perform validation to say that the input does not meet the required entry before submitting the form.
Errors
Once the form is submitted, if there are errors in the form then we should clearly show this at the top of the form. These should be displayed in a div containing a role=”alert” to notify errors to screen readers if performing validation without reloading the page.
Each error should be clearly listed, starting with the number of errors stated inside a h3 tag. Then each error listed describing the input name and the reason it failed validation. These should also be inside links to the specific input. See W3 for more advice or view the html below.
Errors should also be highlighted on each input that requires attention. This makes it visually easier to find and fix the issues.
We also use aria-live=”polite” on the input validation message to inform screen readers.
Code Resource
<div id="form_error" class="form_formValidationSummary" role="alert">
<h3>There are 2 errors in this form</h3>
<ul>
<li>
<a href="#input_email" id="email_error">
The Email field is empty; it is a required field and must be filled in.
</a>
</li>
</ul>
</div>
<label for="input_email" class="form_formLabelTitle">Email *</label>
<input name="input_email" type="input_email" id="input_email" class="form_formTextbox input_error" autocomplete="email" title="Enter your email address" aria-describedby="email_error">
<span id="email_error" title="Email is required." class="form_formRequiredFieldValidator""></span>
<span class="form_formRequiredFieldText" aria-live="polite">Please provide your email address.</span>/* VALIDATION */
.form_formValidationSummary {
color: #201e1e !important;
padding: 20px;
margin-top: 20px;
overflow: hidden;
position: relative;
border-radius: 7px;
margin-bottom: 40px;
text-align: left;
border: 3px solid #f9962c;
}
.form_formValidationSummary:after {
font-family: "Font Awesome 5 Pro";
font-weight: 400;
color: black;
opacity: 0.1;
content: "\f06a";
position: absolute;
font-size: 14em;
right: 9px;
bottom: 117px;
}
.input_error {
border: 1px solid #f9962c!important;
}
.input_error:after {
content: "\f06a";
font-family: "Font Awesome 5 Pro";
font-weight:600;
}
.form_formRequiredFieldValidator {
float: right;
top: -48px;
position: relative;
right: 15px;
color: #c01414;
font-size: 1.2em;
}
.form_formRequiredFieldValidator:after {
content: "\f06a";
font-family: "Font Awesome 5 Pro";
font-weight: 600;
color: orange;
}
.form_formRequiredFieldText {
color: #bf6c00;
margin-bottom: 15px;
display: block;
}