The form error component provides an error display for use within the @uol-form component.
This component should only be used within the @uol-form component.
Do not use in any other situations.
Both “form_error” and “form_error_id” are required to present an error.
A form error is presented at the top of a form. It should be used in scenarios where a user’s input data passes validation constraints, but the data does not match records on the system. As an example, if a user attempts login and the credentials do not match, it may be helpful to direct them to some help pages or give them an email to contact the correct department e.g:
'form': {
'form_error': 'Your login credentails do not match, please email <a href="mailto:somebody@leeds.ac.uk">Somebody at Leeds</a>',
'form_error_id': 'formErrorId',
...
}It is necessary to provide the {‘form_error_id’: ‘UNIQUE_ID_ON_THE_PAGE’} and when the page is sent back, the ID of the form error should be appended to the URL and the attribute tabindex=”-1” should be set to tabindex=”0”. this ensures that the message receives focus and can be consumed by the widest range of devices and assistive technologies.
<div id="{{ form_error_id }}"
class="uol-form__form-error"
aria-label="Error"
role="alert"
aria-live="polite"
tabindex="-1"
data-form-error="true">
<div class="uol-form__form-error__text">{{ form_error | safe }}</div>
</div>
<div id="formErrorId" class="uol-form__form-error" aria-label="Error" role="alert" aria-live="polite" tabindex="-1" data-form-error="true">
<div class="uol-form__form-error__text">The form contains errors</div>
</div>
.uol-form__form-error {
@extend .uol-form__input__error;
position: relative;
max-width: 27.375rem;
border-radius: 6px;
margin-bottom: 2.5rem;
&[data-form-error="true"] {
@include button_focus(-5px, false, $color-alert--error);
}
p {
margin: 0;
padding: 0;;
}
}
.uol-form__form-error__text {
position: relative;
z-index: 3;
}
{
"form_error": "The form contains errors",
"form_error_id": "formErrorId"
}