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:

1. 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).
2. Displays native error message in any DOM element specified with validation-message attribute. Falls back to native popover if not specified.
3. 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/[email protected]"></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 |

Browser support

input-validity will work on all browsers that support ValidityState API

License

MIT