Error summary

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

• Enter your first name
• Enter your last name

Example form with errors

First name *

Enter your first name

Last 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

Twig

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

React

<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>

HTML

<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.