Revision 938109 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>

<dl>
 <dt>{{domxref("ValidityState.badInput")}} {{ReadOnlyInline}}</dt>
 <dd>Is a {{jsxref("Boolean")}} indicating the user has provided input that the browser is unable to convert.</dd>
 <dt>{{domxref("ValidityState.customError")}} {{ReadOnlyInline}}</dt>
 <dd>Is a {{jsxref("Boolean")}} indicating the element's custom validity message has been set to a non-empty string by calling the element's <code>setCustomValidity()</code> method.</dd>
 <dt>{{domxref("ValidityState.patternMismatch")}} {{ReadOnlyInline}}</dt>
 <dd>Is a {{jsxref("Boolean")}} indicating the value does not match the specified {{htmlattrxref("pattern", "input")}}.</dd>
 <dt>{{domxref("ValidityState.rangeOverflow")}} {{ReadOnlyInline}}</dt>
 <dd>Is a {{jsxref("Boolean")}} indicating the value is greater than the maximum specified by the {{htmlattrxref("max", "input")}} attribute.</dd>
 <dt>{{domxref("ValidityState.rangeUnderflow")}} {{ReadOnlyInline}}</dt>
 <dd>Is a {{jsxref("Boolean")}} indicating the value is less than the minimum specified by the {{htmlattrxref("min", "input")}} attribute.</dd>
 <dt>{{domxref("ValidityState.stepMismatch")}} {{ReadOnlyInline}}</dt>
 <dd>Is a {{jsxref("Boolean")}} indicating 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).</dd>
 <dt>{{domxref("ValidityState.tooLong")}} {{ReadOnlyInline}}</dt>
 <dd>Is a {{jsxref("Boolean")}} indicating the value exceeds the specified <code>maxlength</code> for {{domxref("HTMLInputElement")}} or {{domxref("HTMLTextAreaElement")}} objects. <em><strong>Note:</strong> This will never be <code>true</code> in Gecko, because elements' values are prevented from being longer than <code>maxlength</code>.</em></dd>
 <dt>{{domxref("ValidityState.typeMismatch")}} {{ReadOnlyInline}}</dt>
 <dd>Is a {{jsxref("Boolean")}} indicating the value is not in the required syntax (when {{htmlattrxref("type", "input")}} is <code>email</code> or <code>url</code>).</dd>
 <dt>{{domxref("ValidityState.valid")}} {{ReadOnlyInline}}</dt>
 <dd>Is a {{jsxref("Boolean")}} indicating the element meets all constraint validations, and is therefore considered to be valid.</dd>
 <dt>{{domxref("ValidityState.valueMissing")}} {{ReadOnlyInline}}</dt>
 <dd>Is a {{jsxref("Boolean")}} indicating the element has a {{htmlattrxref("required", "input")}} attribute, but no value.</dd>
</dl>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{ SpecName('HTML WHATWG', 'constraints.html#the-constraint-validation-api', 'ValidityState') }}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>Live Standard</td>
  </tr>
  <tr>
   <td>{{ SpecName('HTML5.1', '#the-constraint-validation-api', 'ValidityState') }}</td>
   <td>{{Spec2('HTML5.1')}}</td>
   <td>No change from the previous snapshot {{SpecName('HTML5 W3C')}}.</td>
  </tr>
  <tr>
   <td>{{ SpecName('HTML5 W3C', 'forms.html#the-constraint-validation-api', 'ValidityState') }}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>First snapshot of&nbsp; {{SpecName('HTML WHATWG')}} containing this interface.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown }}</td>
   <td>10</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td><code>badInput</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop(29)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
  </tr>
  <tr>
   <td><code>badIndput</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile(29)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

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

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