reportValidity() ponyfill

GitHub | NPM | Demo | Twitter

This ponyfill 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

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.

Usage

Install via NPM:

npm install --save report-validity

Or include the UMD file in your page:

<script src="report-validity.umd.js"></script>

After that, call the reportValidity() function at any time:

// 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
});