Skip to content
Capture form validation back from the browser
JavaScript Makefile Other
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
dist upgrade dependencies Aug 21, 2019
examples confirm step working as specced May 10, 2016
src add support for calling hyperform on arbitrary DOM nodes Aug 21, 2019
test add support for calling hyperform on arbitrary DOM nodes Aug 21, 2019
.gitignore switch from JSPM to rollup May 13, 2019
.npmignore switch from JSPM to rollup May 13, 2019
.travis.yml crank up node version for travis Aug 21, 2019
CHANGELOG.md 0.11.0 May 23, 2019
CONTRIBUTING.md switch from JSPM to rollup May 13, 2019
LICENSE.md add license Apr 19, 2016
Makefile remove deprecated underscore names May 15, 2019
README.md add contributor Nov 15, 2018
bower.json 0.11.0 May 23, 2019
index.d.ts tweak case Nov 14, 2018
karma.conf.js update karma/sourcelabs test array Aug 21, 2019
package-lock.json
package.json update karma/sourcelabs test array Aug 21, 2019
rollup.config.js switch from JSPM to rollup May 13, 2019

README.md

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

CDNJS

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

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.9.5/hyperform.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hyperform/0.9.5/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). For IE 9+ support simply add this line to use Polyfill.io’s service:

<script src="https://polyfill.io/v2/polyfill.min.js?features=Element.prototype.classList,WeakMap"></script>

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 🌕
setCustomValidity(message) 🌕
validity.valueMissing 🌕
validity.typeMismatch 🌕
validity.patternMismatch 🌕
validity.tooLong 🌕
validity.tooShort 🌕
validity.rangeUnderflow 🌕
validity.rangeOverflow 🌕
validity.stepMismatch 🌕
validity.badInput 🌕
validity.customError 🌕
validity.valid 🌕
checkValidity() 🌕
reportValidity() 🌕
validationMessage 🌕
valueAsDate 🌕
valueAsNumber 🌕
valueLow / valueHigh 🌑
stepUp(n) / stepDown(n) 🌕
accept attribute 🌕
support for novalidate 🌕

Current test status: View on Travis CI

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.

Changelog

We maintain an up-to date changelog named CHANGELOG.md alongside this file.

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, Darlan Mendonça, Christoph Dörfel, Josh Farneman, Casey Corcoran, and many people reporting issues.

You can’t perform that action at this time.