Error summary
Supported products
- Central CMS
- Central Forms
- Central Connect
When form validation fails it is important to display a list of all errors near the top of the page and link to the affected fields. This summary is especially important for people using assistive technology to make sure their tools announce the presence of errors as soon as possible.
Installation
This component requires the ErrorSummaryComponent
to be included in your Pulsar browserify bundle.
index.js
var ErrorSummaryComponent = require('/path/to/ErrorSummary/ErrorSummaryComponent');
module.exports = {
ErrorSummaryComponent
};
main.js
(function ($) {
pulsar.errorSummary = new pulsar.ErrorSummaryComponent();
$(function () {
pulsar.errorSummary.init($html);
});
}(jQuery));
Finally, make sure the styles are being included into the Sass bundle.
pulsar.scss
@import 'component.error-summary';
Basic usage
- Twig
- React
- HTML
{{ form.create() }}
{{
form.error_summary({
'heading': 'There is a problem',
'errors': [
{
'label': 'Enter your first name',
'href': 'first-name'
},
{
'label': 'Enter your last name',
'href': 'last-name'
}
]
})
}}
{{ form.fieldset_start({'legend': 'Example form with errors'}) }}
{{
form.text({
'label': 'First name',
'id': 'first-name',
'required': true,
'error': 'Enter your first name'
})
}}
{{
form.text({
'label': 'Last name',
'id': 'last-name',
'required': true,
'error': 'Enter your last name'
})
}}
{{ form.fieldset_end() }}
{{
form.end({
'actions': [
html.button({
'label': 'Save',
'class': 'btn--primary'
}),
html.button({
'label': 'Cancel',
'class': 'btn--naked'
})
]
})
}}
<Form>
...
<FormActions>
<Button type="submit" className="btn--primary">Primary Action</Button>
<Button type="link" href="/path/to/cancel" className="btn--naked">Cancel</Button>
</FormActions>
</Form>
<form method="POST" enctype="application/x-www-form-urlencoded" class="form">
...
<div class="form__actions">
<button type="submit" class="btn btn--primary">Primary Action</button>
<a href="/home" class="btn btn--naked">Cancel</a>
</div>
</form>
Helper options
You can configure this helper using the common helper options, the following options are specific to this helper.
Option | Type | Description |
---|---|---|
heading | string | The text to be used as the error summary heading. This should always be "There is a problem". |
errors | array | An array of objects representing inputs with errors. Each object should contain the error text displayed under the input and the ID attribute of the input. |
Accessibility
Refer to the Jadu Accessibility Guidelines (internal) for detailed guidance on the accessibility requirements of this component.