JSPM – hyperform@0.4.1

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

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>

In old browsers you will need polyfills for the follwing features: WeakMap (IE 10 and lower), array methods filter and every, object method keys, Object.defineProperty, and string’s trim() method (IE 8 and lower).

Usage

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

hyperform(document.forms[0]);

or all forms, current and future ones:

hyperform(window);

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`	🌕	✔️
`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`	🌕	✔️ (with restriction from `validity.badInput` above)
`checkValidity()`	🌕	✔️ (with restriction from `validity.badInput` above)
`reportValidity()`	🌕	✔️ (with restriction from `validity.badInput` above)
`validationMessage`	🌕	✔️
`valueAsDate`	🌕	✔️
`valueAsNumber`	🌕	✔️
`valueLow` / `valueHigh`	🌑	not started, yet
`stepUp(n)` / `stepDown(n)`	🌓	doesn’t work for date/time types, yet
`accept` attribute	🌑	for `type=file` inputs. It’s useful to implement a check because there are browsers without support, that implement the File API.
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. There are some partial translations available: https://github.com/hyperform/hyperform-l10n
🌕 Provide a registry for user defined validators, 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 hf-valid and hf-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!

Examples

Check out the files in the examples folder.

License

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