Summary Plugin

Renders a consolidated list of all form errors in a fixed container — useful for long forms where inline errors may be out of the viewport when the user clicks submit.

Markup

Place a container element with the class vd-plugins-summary anywhere on the page — typically above the form:

<div class="vd-plugins-summary"></div>

<form id="myForm" novalidate>
  ...
</form>

The summary appears when the form fails validation and clears automatically when the form becomes valid or is reset.

Options

Option	Type	Default	Description
enabled	boolean	true	Enable or disable the plugin
container	string	".vd-plugins-summary"	CSS selector for the summary container
renderTitle	() => string	"Please fix the following errors:"	Title rendered above the list. Return "" to omit.
renderItem	(field, message) => string	message	Formats each error item. Receives the field name and message.
autoScroll	boolean	false	Scrolls the container into view after rendering

Playground

Notes

• The summary renders on core.form.invalid and clears on core.form.valid and core.form.reset.
• Error messages come from the validators — the same messages shown by the Message plugin.
• Use renderItem to add links that focus the relevant field: (field, msg) => \${msg}``.
• The container is not shown or hidden by the plugin — use a MutationObserver or CSS (:empty { display: none }) to control visibility.
• Pair with autoScroll: true on long forms so the user sees the error list immediately after clicking submit.