index.html

---
feature_name: reportValidity()
chrome_version: 40
feature_id: 5433505009893376
---

<h3>Background</h3>

<p>
  This sample illustrates the use of
  <code><a href="https://html.spec.whatwg.org/multipage/forms.html#dom-cva-reportvalidity">reportValidity()</a></code>,
  which provides a way to trigger <code>&lt;form&gt;</code> validation logic.
  If any of a <code>&lt;form&gt;</code>'s inputs are considered invalid, the offending inputs and the constraints
  that are imposed will be identified in the user interface.
  Additionally, <code>reportValidity()</code> returns a boolean value indicating whether all of the inputs
  in the <code>&lt;form&gt;</code> were valid or not.
</p>

<p>
  In this particular case, the <code>&lt;form&gt;</code> contains one <code>&lt;input&gt;</code>,
  with two constraints: <code>required</code>, as well as
  <code><a href="https://html.spec.whatwg.org/multipage/forms.html#attr-fe-minlength">minlength</a>="4"</code>.
</p>


{% capture initial_output_content %}
<form id="sample-form">
  <div>
    <label for="year">Enter at least four characters (required):</label>
    <input id="year" type="text" minlength="4" required>
  </div>
</form>

<button id="report-validity">Report Validity</button>
{% endcapture %}
{% include output_helper.html initial_output_content=initial_output_content %}

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