Input-validity NPM

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.

Docs: https://input-validity.pages.dev/

How it works

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 first invalid 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.

Examples and usage

See examples here.

Installing

Installing input-validity is as simple as adding a <script> tag to your page. No need for complicated build steps or systems.

via CDN, for example unpkg

<script src="https://www.unpkg.com/input-validity"></script>

or with specific version:

<script src="https://www.unpkg.com/input-validity@0.1.5"></script>

CDN approach is extremely simple but you may want to consider not using CDNs in production.

Download a copy

Download and copy it into your project to a public assets directory

<script src="/path/to/input-validity.js"></script>

NPM and bundlers

If you prefer you can also install with npm / pnpm / yarn:

npm install input-validity

And then import into your code:

import "input-validity";

Currently only ESM is supported.

API

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

Attributes for specifying behaviour:

Attribute	Value
validation-message	CSS selector specifying where error message should be displayed

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