This ponyfill recreates the
reportValidity function in non-supporting browsers, and uses the native function if available.
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.
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
See the demo.
Install via NPM:
npm install --save report-validity
Or include the UMD file in your page:
After that, call the
reportValidity() function at any time:
// When using NPM, import the function:;let form = documentbtn = document;btn;