Capture form validation back from the browser
npm install hyperformHyperform is your one-stop solution for client-side form handling.
It features a complete implementation of the HTML5 form validation API in
JavaScript, replaces the browser’s native methods (if they are even
implemented…), and enriches your toolbox with custom events and hooks.
Not pumped yet? Then take a look at
our awesome examples.
Get up and running with Hyperform by embedding it from a CDN:
CDNJS
``html`
or unpkg.com:
`html`
The easiest way is installing via npm:
`sh`
npm install hyperform
or you can use Bower:
`sh`
bower install hyperform
or download the current version as ZIP
archive.
Then embed dist/hyperform.min.js in your file:
`html`
or require it in your code:
`js`
const hyperform = require('hyperform');
In old browsers you will need polyfills for the following features:
WeakMap (IE 10 and lower),
element.classList (IE 9 and lower),
array.filter, array.every, Object.keys andObject.defineProperty (IE 8 and lower). For IE 9+ support simply add this
line to use Polyfill.io’s service:
`html`
You can let Hyperform take over a single form:
`js`
hyperform(document.forms[0]);
or all forms, current and future ones:
`js`
hyperform(window);
Configure settings as second argument:
`js`
hyperform(window, { revalidate: 'never' });
If you only need a certain feature once, you can access it directly by name:
`js`
if (hyperform.willValidate(some_input_element)) {
var is_valid = hyperform.validityState(some_input_element).valid;
}
The full documentation provides you with all
the nitty-gritty details and tricks.
You might be wondering, how to get nifty datepickers and range sliders and
stuff. Unfortunately, this is out of topic for Hyperform, but despair not!
Hyperform UI (beta) is here to
fill in the gaps with the help of jQuery UI.
> “jQuery UI? Isn’t that that thing that they had before React?” — “No, that’s
> Backbone.” — “But before that?” — “No, that was Kendo.” — “...?”
If you had these thoughts right now, rest assured. For the purpose of input
widgets there is still close to no other library, that is complete, themable,
accessible and has wide browser support. Just try it yourself!
Yes, please! The more the better.
The target is 100% support for the HTML5 validation
API. Currently
supported:
| feature | status |
| ---------------------------- | ----------- |
| willValidate | :full_moon: |setCustomValidity(message)
| | :full_moon: |validity.valueMissing
| | :full_moon: |validity.typeMismatch
| | :full_moon: |validity.patternMismatch
| | :full_moon: |validity.tooLong
| | :full_moon: |validity.tooShort
| | :full_moon: |validity.rangeUnderflow
| | :full_moon: |validity.rangeOverflow
| | :full_moon: |validity.stepMismatch
| | :full_moon: |validity.badInput
| | :full_moon: |validity.customError
| | :full_moon: |validity.valid
| | :full_moon: |checkValidity()
| | :full_moon: |reportValidity()
| | :full_moon: |validationMessage
| | :full_moon: |valueAsDate
| | :full_moon: |valueAsNumber
| | :full_moon: |valueLow
| / valueHigh | :new_moon: |stepUp(n)
| / stepDown(n) | :full_moon: |accept
| attribute | :full_moon: |novalidate
| support for | :full_moon: |
Current test status: 
Hyperform is fully tested and supported in
* Chrome (latest 3)
* Firefox (latest 3 and ESR)
* MS Edge (latest)
* IE down to version 9 (yes, you've read that correctly) when WeakMap for IEclassList
≤ 10 and for IE 9 are polyfilled
* Safari. _Caveat:_ In versions ≤ 9 polyfills do not
work. However, form
validation and direct method calling works as expected.)
Cool, yes! Head over to the contributing guide for details.
We maintain an up-to date changelog named CHANGELOG.md`
alongside this file.
This library is released under the terms of the MIT license.
Hyperform is developed by Manuel Strehl with
contributions by
Andrey Volynkin,
Daniel Wang,
Darlan Mendonça,
Christoph Dörfel,
Josh Farneman,
Casey Corcoran,
and many people reporting issues.