Product
Introducing Dashboard Analytics
We're introducing a new Analytics feature in the Socket dashboard so you can view changes in your organization's and repositories' alerts over time.
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.
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">
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>
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.
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: |
support for novalidate | :full_moon: |
Hyperform is fully tested and supported in
WeakMap
for IE
≤ 10 and classList
for IE 9 are polyfilledCool, 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.
FAQs
Capture form validation back from the browser
The npm package hyperform receives a total of 11,829 weekly downloads. As such, hyperform popularity was classified as popular.
We found that hyperform demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
We're introducing a new Analytics feature in the Socket dashboard so you can view changes in your organization's and repositories' alerts over time.
Security News
A new OpenSSF report uncovers critical gaps in secure software training, with 75% of new developers unfamiliar with secure practices, highlighting urgent educational needs.
Security News
The 2023 Python Developers Survey reveals key trends in packaging, web frameworks, and developer demographics, highlighting a shift toward innovative tools as the Python community diversifies and grows among less experienced developers.