reportValidity() Sample

Available in Chrome 40+ | View on GitHub | Browse Samples

Background

This sample illustrates the use of reportValidity(), which provides a way to trigger <form> validation logic. If any of a <form>'s inputs are considered invalid, the offending inputs and the constraints that are imposed will be identified in the user interface. Additionally, reportValidity() returns a boolean value indicating whether all of the inputs in the <form> were valid or not.

In this particular case, the <form> contains one <input>, with two constraints: required, as well as minlength="4".

Live Output

JavaScript Snippet

document.querySelector('#report-validity').addEventListener('click', function() {
  var isValid = document.querySelector('#sample-form').reportValidity();
  ChromeSamples.setStatus('The form ' + (isValid ? 'is' : 'is not') + ' valid.');
});