Skip to content
input-validity

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:

  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.