---
title: ValidityState
slug: Web/API/ValidityState
translation_of: Web/API/ValidityState
---
<div>{{APIRef("HTML DOM")}} {{gecko_minversion_header("2.0")}}</div>

<p><strong><code>ValidityState</code></strong> 介面表示了一個元素目前在其檢核條件下驗證的<em>正確性狀態（validity states）</em>。同時，它們也可以協助解釋元素值檢核失敗的原因，如果元素值為不合法的。</p>

<h2 id="屬性">屬性</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.tooShort")}} {{ReadOnlyInline}}</dt>
 <dd>Is a {{jsxref("Boolean")}} indicating the value fails to meet the specified <code>minlength</code> for {{domxref("HTMLInputElement")}} or {{domxref("HTMLTextAreaElement")}} objects.</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="規範">規範</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', 'forms.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  {{SpecName('HTML WHATWG')}} containing this interface.</td>
  </tr>
 </tbody>
</table>

<h2 id="瀏覽器相容性">瀏覽器相容性</h2>

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

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Edge</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>{{ CompatVersionUnknown }}</td>
   <td>10</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>10.0.3</td>
  </tr>
  <tr>
   <td><code>badInput</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop(29)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>10.0.3</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>Edge</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>
   <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="參見">參見</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>