Revision 752393 of ValidityState

<div>{{APIRef("HTML DOM")}} {{gecko_minversion_header("2.0")}}</div>

<p>The <strong><code>ValidityState</code></strong> interface represents the <em>validity states</em> that an element can be in, with respect to constraint validation. Together, they help explain why an element's value fails to validate, if it's not valid.</p>

<h2 id="Properties">Properties</h2>

<p>For each of these Boolean properties, a value of <code>true</code> indicates that the specified reason validation may have failed is true, with the exception of the valid property, which is <code>true</code> if the element's value obeys all constraints.</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Name</th>
   <th scope="col">Type</th>
   <th scope="col">Description</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>customError</code></td>
   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a></td>
   <td>The element's custom validity message has been set to a non-empty string by calling the element's <code>setCustomValidity()</code> method.</td>
  </tr>
  <tr>
   <td><code>badInput</code></td>
   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a></td>
   <td>The element has incomplete input and the user agent does not think the user ought to be able to submit the form in its current state.</td>
  </tr>
  <tr>
   <td><code>patternMismatch</code></td>
   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a></td>
   <td>The value does not match the specified {{htmlattrxref("pattern", "input")}}.</td>
  </tr>
  <tr>
   <td><code>rangeOverflow</code></td>
   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a></td>
   <td>The value is greater than the maximum specified by the {{htmlattrxref("max", "input")}} attribute.</td>
  </tr>
  <tr>
   <td><code>rangeUnderflow</code></td>
   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a></td>
   <td>The value is less than the minimum specified by the {{htmlattrxref("min", "input")}} attribute.</td>
  </tr>
  <tr>
   <td><code>stepMismatch</code></td>
   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a></td>
   <td>The value does not fit the rules determined by the {{htmlattrxref("step", "input")}} attribute (that is, it's not evenly divisible by the step value).</td>
  </tr>
  <tr>
   <td><code>tooLong</code></td>
   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a></td>
   <td>
    <p>The value exceeds the specified <code>maxlength</code> for {{domxref("HTMLInputElement")}} or {{domxref("HTMLTextAreaElement")}} objects.</p>

    <div class="note"><strong>Note:</strong> This will never be <code>true</code> in Gecko, because elements' values are prevented from being longer than <code>maxlength</code>.</div>
   </td>
  </tr>
  <tr>
   <td><code>typeMismatch</code></td>
   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a></td>
   <td>The value is not in the required syntax (when {{htmlattrxref("type", "input")}} is <code>email</code> or <code>url</code>).</td>
  </tr>
  <tr>
   <td><code>valid</code></td>
   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a></td>
   <td>The element meets all constraint validations, and is therefore considered to be valid.</td>
  </tr>
  <tr>
   <td><code>valueMissing</code></td>
   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a></td>
   <td>The element has a {{htmlattrxref("required", "input")}} attribute, but no value.</td>
  </tr>
 </tbody>
</table>

<h2 id="Specification">Specification</h2>

<ul>
 <li><a href="https://dev.w3.org/html5/spec-preview/constraints.html#the-constraint-validation-api">W3C HTML5 Specification: Constraints: The Constraint Validation API</a></li>
</ul>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/HTML/HTML5/Constraint_validation">Constraint validation</a></li>
 <li><a href="/en-US/docs/HTML/Forms/Data_form_validation">Forms: Data form validation</a></li>
</ul>