hyperform

Capture form validation back from the browser

Hyperform is your one-stop solution for client-side form handling.

It features a complete implementation of the HTML 5 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.

Installation

Embed from a CDN

Get up and running with Hyperform by embedding it from a CDN: CDNJS

<script src="https://cdnjs.cloudflare.com/ajax/libs/hyperform/0.8.15/hyperform.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hyperform/0.8.15/hyperform.min.css">

or unpkg.com:

<script src="https://unpkg.com/hyperform"></script>
<link rel="stylesheet" href="https://unpkg.com/hyperform@latest/css/hyperform.css">

Install locally

The easiest way is installing via npm:

npm install hyperform

or you can use Bower:

bower 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>

or require it in your code:

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 and Object.defineProperty (IE 8 and lower).

Usage

You can let Hyperform take over a single form:

hyperform(document.forms[0]);

or all forms, current and future ones:

hyperform(window);

Configure settings as second argument:

hyperform(window, { revalidate: 'never' });

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

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.

What About the UI?

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!

Examples

Yes, please! The more the better.

Status

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:
support for novalidate	:full_moon:

Current test status:

Browser Support

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 IE ≤ 10 and classList for IE 9 are polyfilled
• Safari. Caveat: In versions ≤ 9 polyfills do not work. However, form validation and direct method calling works as expected.)

Contributing

Cool, yes! Head over to the contributing guide for details.

License

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

Contributors

Hyperform is developed by Manuel Strehl with contributions by Andrey Volynkin, Daniel Wang, and many people reporting issues.

Changelog

v0.9.2

• fix wrong value in tooShort message