JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 12885
  • Score
    100M100P100Q131673F
  • License MIT

Capture form validation back from the browser

Package Exports

  • hyperform
  • hyperform/dist/hyperform.amd

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (hyperform) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Text “Hyperform - Insert Form” in 80s arcade game style

Capture form validation back from the browser

Hyperform is a complete implementation of the HTML 5 form validation API in Javascript. It replaces the browser’s native methods (if it even implements them…) and enriches it with custom events and hooks.

Installation

The easiest way is installing via npm:

npm install hyperform

Or download the current version as ZIP archive.

Then embed dist/hyperform.min.js in your file:

<script src="path/to/hyperform/dist/hyperform.min.js"></script>

Usage

The library introduces the global variable hyperform. You can let Hyperform take over a single form:

hyperform.capture(document.forms[0]);

or all forms, current and future ones:

hyperform.capture(document);

If you need only a certain feature, you can access it directly by name:

hyperform.setCustomValidity.call(form.elements[0], 'my message');

Status

What parts of the HTML5 validation API are ready for prime time?

feature status comment
willValidate 🌕
setCustomValidity(message) 🌕
validity.valueMissing 🌕
validity.typeMismatch 🌕
validity.patternMismatch 🌕
validity.tooLong 🌕
validity.tooShort 🌕
validity.rangeUnderflow 🌕
validity.rangeOverflow 🌕
validity.stepMismatch 🌗 Step validation for type=month is incorrect, yet
validity.badInput 🌖 Works for all but type=email. (That last one might be unfixable. See comment in src/validators/bad_input.js.)
validity.customError 🌕
validity.valid 🌖 Depends on the other validations above. Apart from that, finished.
checkValidity() 🌖 Depends on ValidityState. Apart from that, finished.
reportValidity() 🌗 Depends on ValidityState. Needs a bit more love for the error message renderer. Will render error, even if invalid event is cancelled.
validationMessage 🌕
valueAsDate 🌕
valueAsNumber 🌕
valueLow / valueHigh 🌑 not started, yet
stepUp(n) / stepDown(n) 🌑 not started, yet
accept attribute 🌑 for type=file inputs. Is it useful to implement a check here? There are browsers without support here, that implement the File API. So we could totally do it.
support for novalidate 🌑

What parts of the high-level API are finished?

  • 🌑 Trigger a validate event before validating an element.
  • 🌑 Trigger a valid event, when an input becomes valid, again.
  • 🌑 Allow functions to hook into the actual validations to accept or reject inputs.
  • 🌑 Translate validation messages.
  • 🌑 Add a registry for custom validators for inputs, that are called automatically in the validity.customError step.
  • 🌑 Catch form submissions before the submit event to do our own validation (clicks on submit buttons and enter keys in text inputs in forms w/o submit buttons).
  • 🌑 Add helper classes valid and invalid as well as proper aria-invalid to elements to become independent of :valid / :invalid pseudo-classes.
  • 🌑 Allow specifying settings to customize the behavior of Hyperform (e. g., specifying a renderer for error messages).
  • 🌑 Take single <input> elements out of validation (think novalidate attribute for inputs).

Do you have a wish or an idea? File an issue and let us discuss it!

License

This library is released under the terms of the MIT license.