A field error element

A work in progress. There be gaps and breaking changes in-bound.

A custom element that allows you to declaratively set custom error messages for a form control for its validation constraints.

Usage

Import and define the custom element with a name of your choosing:

import { FieldErrorElement } from "@knowler/field-error-element";

customElements.define("field-error", FieldErrorElement);

Use the element alongside your HTML. Where it’s placed is where it will be displayed.

<label for=email>Email</label>
<field-error for=email
	value-missing="An email address is required."
	type-mismatch="Provide a valid email address."
></field-error>
<input id=email type=email name=email required>

Use kebab-cased ValidityState constraints as attribtues to set corresponding messages for them.

Note that the element itself is not responsible for reporting the error messages. These show when there’s invalid fields on an attempted submit or when an author calls reportValidity() for the associated field. In both cases, it prevents the default validation popup from showing up.

Styling

A big gap here: there’s no custom state being set, so there’s no way of knowing when the control is showing a message.

Roadmap

• Add custom states for styling. Also, maybe some default styles.
  • Perhaps an error icon something too which can be a shadow part.
• Probably use aria-describedby for macOS VoiceOver and Windows Narrator support.
• Consider allowing slotted content for server-side error messages.
  • This would be considered a default message which would be overriden by messages based on its active validity state.
• Suppress titlish-tooltips-as-validation-messages in Edge and Safari.