Introduction
input-validity
is a minimal (702 B min+gzip) client-side form validation library with 0 dependencies that uses native HTML5 validation. Works perfect with server-rendered apps and minimal frontend libraries such as HTMX or Alpine.js.
In essence it allows for custom styling of HTML validation and aligns behaviour attributes like required
, type="email"
, min
, maxlength
, etc. to behave more like modern frontend framework validation.
Under the hood input-validity
does following:
- Adds
data-dirty
to a<input />
or element, which combined with:invalid
CSS pseudo class allows for indicating error state of the input. This attribute is added to the input after firstinvalid
event (fired after first submit attempt). - Displays native error message in any DOM element specified with
validation-message
attribute. Falls back to native popover if not specified. - Allows for custom error messages with
message-*
attributes. Falls back to native messages if not specified.