https://github.com/jelmerdemaat/report-validity
reportValidity() ponyfill
https://github.com/jelmerdemaat/report-validity
form javascript module ponyfill report validation validity
Last synced: about 1 year ago
JSON representation
reportValidity() ponyfill
- Host: GitHub
- URL: https://github.com/jelmerdemaat/report-validity
- Owner: jelmerdemaat
- License: other
- Created: 2018-10-02T16:01:06.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T03:59:19.000Z (over 3 years ago)
- Last Synced: 2025-03-23T20:43:18.811Z (about 1 year ago)
- Topics: form, javascript, module, ponyfill, report, validation, validity
- Language: JavaScript
- Homepage: https://report-validity.now.sh/
- Size: 1.2 MB
- Stars: 5
- Watchers: 1
- Forks: 1
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# `reportValidity()` ponyfill
[GitHub](https://github.com/jelmerdemaat/report-validity) | [NPM](https://www.npmjs.com/package/report-validity) | [Demo](https://report-validity.now.sh) | [Twitter](https://twitter.com/jelmerdemaat)
This [ponyfill](https://ponyfill.com) recreates the `reportValidity` function in non-supporting browsers, and uses the native function if available.
Explanation of `reportValidity`:
> The HTMLFormElement.reportValidity() method returns true if the element's child controls satisfy their validation constraints. When false is returned, cancelable invalid events are fired for each invalid child and validation problems are reported to the user.
Source: [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reportValidity)
What this means in the most common use case, is that you can _programmatically call_ `reportValidity()` on a form, and it will initiate the HTML5 form validation _without submitting the form_. This often includes focussing on the first invalid field, scrolling to it, and displaying an error message (depending on the browser).
Browser support for `reportValidity` is mainly lacking in IE11: https://www.caniuse.com/#feat=constraint-validation
## Working example
See the [demo](https://report-validity.now.sh).
## Usage
Install via NPM:
```sh
npm install --save report-validity
```
Or include the UMD file in your page:
```html
```
After that, call the `reportValidity()` function at any time:
```js
// When using NPM, import the function:
import reportValidity from 'report-validity';
let form = document.querySelector('form'),
btn = document.querySelector('.reportFormValidityWhenIClickThis');
btn.addEventListener('click', () => {
// Let the browser report the validity:
let result = reportValidity(form);
// `result` is now true or false depending on the validity
});
```