input-validity

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.

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.

Examples and usage

See guides and examples.

API

API reference

Browser support

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

License

MIT