Security News
Introducing the Socket Python SDK
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
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.
The easiest way is installing via npm
:
npm install hyperform
or if you 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>
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).
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);
Configure settings as second argument:
hyperform(window, {
strict: false, // default. En- or disable some high-level APIs
revalidate: 'oninput', // default. Whether fields should be
// re-validated automatically. Valid values:
// `oninput`, `onsubmit`, and `never`.
valid_event: true, // default. Whether the non-standard `valid`
// event should be triggered
});
If you only need a certain feature, you can access it directly by name:
if (hyperform.willValidate(form.elements[0])) {
var is_valid = hyperform.validityState(form.elements[0]).valid;
}
Check out the awesome examples!
What parts of the HTML5 validation API are ready for prime time?
feature | status | comment |
---|---|---|
willValidate | :full_moon: | :heavy_check_mark: |
setCustomValidity(message) | :full_moon: | :heavy_check_mark: |
validity.valueMissing | :full_moon: | :heavy_check_mark: (access via hyperform.validityState ) |
validity.typeMismatch | :full_moon: | :heavy_check_mark: (access via hyperform.validityState ) |
validity.patternMismatch | :full_moon: | :heavy_check_mark: (access via hyperform.validityState ) |
validity.tooLong | :full_moon: | :heavy_check_mark: (access via hyperform.validityState ) |
validity.tooShort | :full_moon: | :heavy_check_mark: (access via hyperform.validityState ) |
validity.rangeUnderflow | :full_moon: | :heavy_check_mark: (access via hyperform.validityState ) |
validity.rangeOverflow | :full_moon: | :heavy_check_mark: (access via hyperform.validityState ) |
validity.stepMismatch | :full_moon: | :heavy_check_mark: (access via hyperform.validityState ) |
validity.badInput | :full_moon: | :heavy_check_mark: (access via hyperform.validityState ) |
validity.customError | :full_moon: | :heavy_check_mark: (access via hyperform.validityState ) |
validity.valid | :full_moon: | :heavy_check_mark: (access via hyperform.validityState ) |
checkValidity() | :full_moon: | :heavy_check_mark: |
reportValidity() | :full_moon: | :heavy_check_mark: |
validationMessage | :full_moon: | :heavy_check_mark: |
valueAsDate | :full_moon: | :heavy_check_mark: |
valueAsNumber | :full_moon: | :heavy_check_mark: |
valueLow / valueHigh | :new_moon: | not started, yet |
stepUp(n) / stepDown(n) | :full_moon: | :heavy_check_mark: |
accept attribute | :full_moon: | :heavy_check_mark: 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 | :full_moon: | :heavy_check_mark: |
What parts of the high-level API are finished?
:full_moon: Trigger a validate
event before validating a form:
form.addEventListener('validate', event => {
/* cancel validation (will also cancel form submission!) */
event.preventDefault();
});
:new_moon: Trigger an event before validating individual elements.
:full_moon: Trigger a valid
event, when an input becomes valid, again:
input.addEventListener('valid', () => alert('Yay!'));
:new_moon: Allow functions to hook into the actual validations to accept or reject inputs.
:first_quarter_moon: Translate validation messages. We have some partial translations ready: https://github.com/hyperform/hyperform-l10n
:full_moon: Provide a registry for user defined validators, that are called
automatically in the validity.customError
step:
hyperform.register(element, function(element) {
return result_of_convoluted_validation_routine();
});
:full_moon: Catch form submissions before the submit
event to do our
own validation (click
s on submit buttons and enter
keys in text inputs
in forms w/o submit buttons).
:full_moon: Add helper classes hf-valid
and hf-invalid
as well as
proper aria-invalid
to elements to become independent of :valid
/
:invalid
pseudo-classes.
:first_quarter_moon: Allow specifying settings to customize the behavior of Hyperform (e. g., specifying a renderer for error messages).
:full_moon: Take single <input>
elements out of validation by supporting
a non-standard novalidate
attribute and noValidate
property for inputs:
var element = document.querySelector('input[name="foo"]');
element.noValidate = true;
// done. element won't be validated.
:new_moon: Add support for declarative custom validation messages:
<input data-validation-message="We need this field!">
:new_moon: Idea: Add a means of linking two <input>
s together so they get
validated synchronously:
hyperform.link(element1, element2);
element1.reportValidity();
// element2.reportValidity gets triggered automatically
Do you have a wish or an idea? File an issue and let us discuss it!
This library is released under the terms of the MIT license.
v0.8.15
<=
10 not knowing HTMLDocumentFAQs
Capture form validation back from the browser
The npm package hyperform receives a total of 12,763 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.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.
Security News
A new Rust RFC proposes "Trusted Publishing" for Crates.io, introducing short-lived access tokens via OIDC to improve security and reduce risks associated with long-lived API tokens.