Error Summary

plos_error_summary renders an error summary box at the top of a form page. It links each error to the affected input field via an anchor. When entries is empty the component renders nothing.

Example

Click an error link to jump to the corresponding field.

There is an issue

Full name: Enter your full name
Email address: Enter an email address in the correct format, like name@example.com

Full name

Error:
Enter your full name

Email address

Error:
Enter an email address in the correct format, like name@example.com

Custom title

Use the title parameter to override the default heading.

Three errors prevented your submission

Date of birth: Enter a valid date of birth
Phone number: Enter a UK phone number
Postcode: Enter a full UK postcode

Usage

Build the entries list in your view:

entries = [
    {
        "label": "Full name",
        "message": "Enter your full name",
        "anchor": "id_full_name",
    },
    {
        "label": "Email address",
        "message": "Enter an email address in the correct format",
        "anchor": "id_email",
    },
]

Then pass it to the component in your template:

{% component "plos_error_summary" entries=entries %}{% endcomponent %}

Each entry requires three keys:

label: human-readable label shown before the colon (e.g. "Patent 1")
message: the validation error text
anchor: the id of the target input, without the leading #

An optional title parameter overrides the default heading "There is an issue".