Skip to main content

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.

There is a problem

Example form with errors
Enter your first name
Enter your last name

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

{{ 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'
})
]
})
}}

Helper options

You can configure this helper using the common helper options, the following options are specific to this helper.

OptionTypeDescription
headingstringThe text to be used as the error summary heading. This should always be "There is a problem".
errorsarrayAn 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.