API Reference

Following attributes can be used on any <input /> element.

Attributes for specifying behaviour

Attribute	Value	Description
validation-message	CSS selector	Specifu where error messages should be displayed.
pattern-value	CSS selector	Dynamically set a value for pattern validation from an input. Useful for stuff like password repeat.

Attributes for defining custom error messges

Attribute	Description	Corresponding ValidityState property
message-bad-input	Input value that the browser is unable to convert	badInput
message-pattern-mismatch	Input value does not match the specified pattern	patternMismatch
message-range-overflow	Input value is greater than the maximum specified by the max attribute	rangeOverflow
message-range-underflow	Input value is less than the minimum specified by the min attribute	rangeUnderflow
message-step-mismatch	Input value does not fit the rules determined by the step attribute (that is, it’s not evenly divisible by the step value)	stepMismatch
message-too-long	Input value exceeds the specified maxlength	tooLong
message-too-short	Input value fails to meet the specified minlength	tooShort
message-type-mismatch	Input value is not in the required syntax (when type is email or url)	typeMismatch
message-value-missing	Input element has a required attribute, but no value	valueMissing

Methods

In some situations you might need to tell input-validity that DOM has been changed by other library. For this purpose there is the init() method, accessible via global variable or imported from the module.

• when input-validit is loaded directly with <script> tag:

InputValidity.init();

• when loaded as a module:

import { init } from "input-validity";

init();

This is useful especially when HTMX updates the DOM or after Astro’s View Transition:

document.addEventListener("astro:after-swap", () => {
  InputValidity.init();
});

htmx.on("htmx:load", () => {
  InputValidity.init();
});