Skip to content

Commit

Permalink
fix Web/API/ValidityState (mdn#3494)
Browse files Browse the repository at this point in the history 
- set \<code> elements to literals
- correct a link
  • Loading branch information
@mfuji09
mfuji09 authored Mar 25, 2021
1 parent 3fde2b6 commit 1d2c354
Showing 1 changed file with 14 additions and 12 deletions.
26 changes: 14 additions & 12 deletions files/en-us/web/api/validitystate/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,42 +14,44 @@

<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 <strong>valid</strong> property, which is <code>true</code> if the element's value obeys all constraints.</p>
<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 <code>valid</code> property, which is <code>true</code> if the element's value obeys all constraints.</p>

<dl>
<dt>{{domxref("ValidityState.badInput", "badInput")}} {{ReadOnlyInline}}</dt>
<dd>A {{jsxref("Boolean")}} that is <code>true</code> if the user has provided input that the browser is unable to convert.</dd>
<dt><code>customError</code> {{ReadOnlyInline}}</dt>
<dd>A {{jsxref("Boolean")}} indicating whether the element's custom validity message has been set to a non-empty string by calling the element's {{domxref('HTMLObjectElement.setCustomValidity', 'setCustomValidity()')}} method.</dd>
<dt>{{domxref("ValidityState.patternMismatch", "patternMismatch")}} {{ReadOnlyInline}}</dt>
<dd>A {{jsxref("Boolean")}} that is <code>true</code> if the value does not match the specified {{htmlattrxref("pattern", "input")}}, and <code>false</code> if it does match. If true, the element matches the {{cssxref(":invalid")}} CSS pseudo-class.</dd>
<dd>A {{jsxref("Boolean")}} that is <code>true</code> if the value does not match the specified {{htmlattrxref("pattern", "input")}}, and <code>false</code> if it does match. If <code>true</code>, the element matches the {{cssxref(":invalid")}} CSS pseudo-class.</dd>
<dt>{{domxref("ValidityState.rangeOverflow", "rangeOverflow")}} {{ReadOnlyInline}}</dt>
<dd>A {{jsxref("Boolean")}} that is true if the value is greater than the maximum specified by the {{htmlattrxref("max", "input")}} attribute, or <code>false</code> if it is less than or equal to the maximum. If true, the element matches the {{cssxref(":invalid")}} and {{cssxref(":out-of-range")}} and CSS pseudo-classes.</dd>
<dd>A {{jsxref("Boolean")}} that is <code>true</code> if the value is greater than the maximum specified by the {{htmlattrxref("max", "input")}} attribute, or <code>false</code> if it is less than or equal to the maximum. If <code>true</code>, the element matches the {{cssxref(":invalid")}} and {{cssxref(":out-of-range")}} and CSS pseudo-classes.</dd>
<dt>{{domxref("ValidityState.rangeUnderflow", "rangeUnderflow")}} {{ReadOnlyInline}}</dt>
<dd>A {{jsxref("Boolean")}} that is <code>true</code> if the value is less than the minimum specified by the {{htmlattrxref("min", "input")}} attribute, or <code>false</code> if it is greater than or equal to the minimum. If true, the element matches the {{cssxref(":invalid")}} and {{cssxref(":out-of-range")}} CSS pseudo-classes.</dd>
<dd>A {{jsxref("Boolean")}} that is <code>true</code> if the value is less than the minimum specified by the {{htmlattrxref("min", "input")}} attribute, or <code>false</code> if it is greater than or equal to the minimum. If <code>true</code>, the element matches the {{cssxref(":invalid")}} and {{cssxref(":out-of-range")}} CSS pseudo-classes.</dd>
<dt>{{domxref("ValidityState.stepMismatch", "stepMismatch")}} {{ReadOnlyInline}}</dt>
<dd>A {{jsxref("Boolean")}} that is <code>true</code> if 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), or <code>false</code> if it does fit the step rule. If true, the element matches the {{cssxref(":invalid")}} and {{cssxref(":out-of-range")}} CSS pseudo-classes.</dd>
<dd>A {{jsxref("Boolean")}} that is <code>true</code> if 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), or <code>false</code> if it does fit the step rule. If <code>true</code>, the element matches the {{cssxref(":invalid")}} and {{cssxref(":out-of-range")}} CSS pseudo-classes.</dd>
<dt>{{domxref("ValidityState.tooLong", "tooLong")}} {{ReadOnlyInline}}</dt>
<dd>A {{jsxref("Boolean")}} that is <code>true</code> if the value exceeds the specified <code>maxlength</code> for {{domxref("HTMLInputElement")}} or {{domxref("HTMLTextAreaElement")}} objects, or false if its length is less than or equal to the maximum length. <em><strong>Note:</strong> This property is never <code>true</code> in Gecko, because elements' values are prevented from being longer than <code>maxlength</code>.</em> If true, the element matches the {{cssxref(":invalid")}} and {{cssxref(":out-of-range")}} CSS pseudo-classes.</dd>
<dd>A {{jsxref("Boolean")}} that is <code>true</code> if the value exceeds the specified <code>maxlength</code> for {{domxref("HTMLInputElement")}} or {{domxref("HTMLTextAreaElement")}} objects, or <code>false</code> if its length is less than or equal to the maximum length. <em><strong>Note:</strong> This property is never <code>true</code> in Gecko, because elements' values are prevented from being longer than <code>maxlength</code>.</em> If <code>true</code>, the element matches the {{cssxref(":invalid")}} and {{cssxref(":out-of-range")}} CSS pseudo-classes.</dd>
<dt>{{domxref("ValidityState.tooShort", "tooShort")}} {{ReadOnlyInline}}</dt>
<dd>A {{jsxref("Boolean")}} that is <code>true</code> if the value fails to meet the specified <code>minlength</code> for {{domxref("HTMLInputElement")}} or {{domxref("HTMLTextAreaElement")}} objects, or <code>false</code> if its length is greater than or equal to the minimum length. If true, the element matches the {{cssxref(":invalid")}} and {{cssxref(":out-of-range")}} CSS pseudo-classes.</dd>
<dd>A {{jsxref("Boolean")}} that is <code>true</code> if the value fails to meet the specified <code>minlength</code> for {{domxref("HTMLInputElement")}} or {{domxref("HTMLTextAreaElement")}} objects, or <code>false</code> if its length is greater than or equal to the minimum length. If <code>true</code>, the element matches the {{cssxref(":invalid")}} and {{cssxref(":out-of-range")}} CSS pseudo-classes.</dd>
<dt>{{domxref("ValidityState.typeMismatch", "typeMismatch")}} {{ReadOnlyInline}}</dt>
<dd>A {{jsxref("Boolean")}} that is <code>true</code> if the value is not in the required syntax (when {{htmlattrxref("type", "input")}} is <code>email</code> or <code>url</code>), or <code>false</code> if the syntax is correct. If true, the element matches the {{cssxref(":invalid")}} CSS pseudo-class.</dd>
<dd>A {{jsxref("Boolean")}} that is <code>true</code> if the value is not in the required syntax (when {{htmlattrxref("type", "input")}} is <code>email</code> or <code>url</code>), or <code>false</code> if the syntax is correct. If <code>true</code>, the element matches the {{cssxref(":invalid")}} CSS pseudo-class.</dd>
<dt><code>valid</code> {{ReadOnlyInline}}</dt>
<dd>A {{jsxref("Boolean")}} that is <code>true</code> if the element meets all its validation constraints, and is therefore considered to be valid, or <code>false</code> if it fails any constraint. If true, the element matches the {{cssxref(":valid")}} CSS pseudo-class; the {{cssxref(":invalid")}} CSS pseudo-class otherwise.</dd>
<dd>A {{jsxref("Boolean")}} that is <code>true</code> if the element meets all its validation constraints, and is therefore considered to be valid, or <code>false</code> if it fails any constraint. If <code>true</code>, the element matches the {{cssxref(":valid")}} CSS pseudo-class; the {{cssxref(":invalid")}} CSS pseudo-class otherwise.</dd>
<dt>{{domxref("ValidityState.valueMissing", "valueMissing")}} {{ReadOnlyInline}}</dt>
<dd>A {{jsxref("Boolean")}} that is <code>true</code> if the element has a {{htmlattrxref("required", "input")}} attribute, but no value, or <code>false</code> otherwise. If true, the element matches the {{cssxref(":invalid")}} CSS pseudo-class.</dd>
<dd>A {{jsxref("Boolean")}} that is <code>true</code> if the element has a {{htmlattrxref("required", "input")}} attribute, but no value, or <code>false</code> otherwise. If <code>true</code>, the element matches the {{cssxref(":invalid")}} CSS pseudo-class.</dd>
</dl>

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

<table class="standard-table">
<tbody>
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('HTML WHATWG', 'form-control-infrastructure.html#validitystate', 'ValidityState') }}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
Expand All @@ -76,5 +78,5 @@ <h2 id="See_also">See also</h2>

<ul>
<li><a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">Guide: Constraint validation</a></li>
<li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Tutorial: Form data validation</a></li>
<li><a href="/en-US/docs/Learn/Forms/Form_validation">Tutorial: Form data validation</a></li>
</ul>

0 comments on commit 1d2c354

Please sign in to comment.