mdn · bsmth · Jul 15, 2024 · Apr 26, 2023 · Apr 26, 2023 · Apr 26, 2023
@@ -8,27 +8,61 @@ browser-compat: api.ValidityState.badInput
 
 {{APIRef("HTML DOM")}}
 
-The read-only **`badInput`** property of a [ValidityState](/en-US/docs/Web/API/ValidityState) object indicates if the user has provided input that the browser is unable to convert. For example, if you have a number input element whose content is a string.
+The read-only **`badInput`** property of the [ValidityState](/en-US/docs/Web/API/ValidityState) interface indicates if the user has provided input that the browser is unable to convert. For example, if you have a number input element whose content is a string.
 
 ## Value
 
-A boolean.
+A boolean that is `true` if the `ValidityState` object does not conform to the expected type.
 
 ## Examples
 
+### Detecting bad input
+
+The following example checks the validity of a [numeric input element](/en-US/docs/Web/HTML/Element/input/number).
+If the user enters text instead of a number, the element fails constraint validation, and the styles matching [`input:invalid`](/en-US/docs/Web/CSS/:invalid) are applied.
+The [`<pre>`](/en-US/docs/Web/HTML/Element/pre) element above the input shows the validation message when the element `badInput` evaluates to `true`:
+
+```css
+input:invalid {
+  outline: red solid 3px;
+}
+```
+
+```css hidden
+body {
+  margin: 0.5rem;
+}
+pre {
+  padding: 1rem;
+  height: 2rem;
+  background-color: lightgrey;
+  outline: 1px solid grey;
+}
+```
+
 ```html
+<pre id="log">Validation logged here...</pre>
 <input type="number" id="age" />
 ```
 
 ```js
-const input = document.getElementById("age");
-if (input.validity.badInput) {
-  console.log("Bad input detected…");
-} else {
-  console.log("Content of input OK.");
+const userInput = document.getElementById("age");
+const logElement = document.getElementById("log");
+
+function log(text) {
+  logElement.innerText = text;
 }
+
+userInput.addEventListener("input", () => {
+  userInput.reportValidity();
+  if (userInput.validity.badInput) {
+    log("Bad input detected: " + userInput.validationMessage);
+  }
+});
 ```
 
+{{EmbedLiveSample("displaying_validity_state", "100%", "140")}}
+
 ## Specifications
 
 {{Specifications}}
@@ -39,5 +73,6 @@ if (input.validity.badInput) {
 
 ## See also
 
+- ValidityState [valid](/en-US/docs/Web/API/ValidityState/valid), [customError](/en-US/docs/Web/API/ValidityState/customError) properties.
 - [Guide: Constraint validation](/en-US/docs/Web/HTML/Constraint_validation)
 - [Tutorial: Form data validation](/en-US/docs/Learn/Forms/Form_validation)
@@ -0,0 +1,114 @@
+---
+title: "ValidityState: customError property"
+short-title: customError
+slug: Web/API/ValidityState/customError
+page-type: web-api-instance-property
+browser-compat: api.ValidityState.customError
+---
+
+{{APIRef("HTML DOM")}}
+
+The read-only **`customError`** property of the [`ValidityState`](/en-US/docs/Web/API/ValidityState) interface returns `true` if an element doesn't meet the validation required in the custom validity set by the element's {{domxref("HTMLObjectElement.setCustomValidity", "setCustomValidity()")}} method.
+
+## Value
+
+A boolean that is `true` if a custom error message has been set to a non-empty string.
+
+## Examples
+
+### Detecting a custom error
+
+In this example, {{domxref("HTMLObjectElement.setCustomValidity", "setCustomValidity()")}} sets a custom error message when a form submission contains user input that's considered invalid.
+The "Validate input" button calls {{domxref("HTMLFormElement.reportValidity", "reportValidity()")}}, which displays a validation message under the element if a user enters values that do not match the [form's constraints](/en-US/docs/Web/HTML/Constraint_validation#constraint_validation_process).
+
+If you enter the text "good" or "fine" and try to validate the input, the field is marked invalid until the custom error message is cleared (set to an empty string).
+For comparison, there is a [`minlength`](/en-US/docs/Web/HTML/Attributes/minlength) attribute on the input element that allows us to demonstrate the [`tooShort` validity state](/en-US/docs/Web/API/ValidityState/tooShort) when the user enters less than two characters.
+When the value in the form control is invalid, even if there is no custom error, the input will have a red outline.
+
+#### HTML
+
+```html
+<pre id="log">Validation failures logged here...</pre>
+<input
+  type="text"
+  id="userInput"
+  placeholder="How do you feel?"
+  minlength="2" />
+<button id="checkButton">Validate input</button>
+```
+
+#### CSS
+
+```css
+input:invalid {
+  border: red solid 3px;
+}
+```
+
+```css hidden
+body {
+  margin: 0.5rem;
+}
+pre {
+  padding: 1rem;
+  height: 2rem;
+  background-color: lightgrey;
+  outline: 1px solid grey;
+}
+```
+
+#### JavaScript
+
+```js
+const userInput = document.getElementById("userInput");
+const checkButton = document.getElementById("checkButton");
+const logElement = document.getElementById("log");
+
+function log(text) {
+  logElement.innerText = text;
+}
+
+const check = (input) => {
+  // Handle cases where input is too vague
+  if (input.value == "good" || input.value == "fine") {
+    input.setCustomValidity(`"${input.value}" is not a feeling.`);
+  } else {
+    // An empty string resets the custom validity state
+    input.setCustomValidity("");
+  }
+};
+
+userInput.addEventListener("input", () => {
+  check(userInput);
+});
+
+const validateInput = () => {
+  userInput.reportValidity();
+  if (userInput.validity.customError) {
+    // We can handle custom validity states here
+    log("Custom validity error: " + userInput.validationMessage);
+  } else {
+    log(userInput.validationMessage);
+  }
+};
+
+checkButton.addEventListener("click", validateInput);
+```
+
+#### Result
+
+{{EmbedLiveSample("detecting_a_custom_error", "100%", "140")}}
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- ValidityState [badInput](/en-US/docs/Web/API/ValidityState/badInput), [valid](/en-US/docs/Web/API/ValidityState/valid) properties.
+- [Constraint validation](/en-US/docs/Web/HTML/Constraint_validation)
+- [Forms: Data form validation](/en-US/docs/Learn/Forms/Form_validation)
@@ -15,7 +15,7 @@ For each of these Boolean properties, a value of `true` indicates that the speci
 
 - {{domxref("ValidityState.badInput", "badInput")}} {{ReadOnlyInline}}
   - : A boolean value that is `true` if the user has provided input that the browser is unable to convert.
-- `customError` {{ReadOnlyInline}}
+- {{domxref("ValidityState.customError", "customError")}} {{ReadOnlyInline}}
   - : A boolean value 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.
 - {{domxref("ValidityState.patternMismatch", "patternMismatch")}} {{ReadOnlyInline}}
   - : A boolean value that is `true` if the value does not match the specified [`pattern`](/en-US/docs/Web/HTML/Element/input#pattern), and `false` if it does match. If `true`, the element matches the {{cssxref(":invalid")}} CSS pseudo-class.
@@ -24,14 +24,14 @@ For each of these Boolean properties, a value of `true` indicates that the speci
 - {{domxref("ValidityState.rangeUnderflow", "rangeUnderflow")}} {{ReadOnlyInline}}
   - : A boolean value that is `true` if the value is less than the minimum specified by the [`min`](/en-US/docs/Web/HTML/Element/input#min) attribute, or `false` 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.
 - {{domxref("ValidityState.stepMismatch", "stepMismatch")}} {{ReadOnlyInline}}
-  - : A boolean value that is `true` if the value does not fit the rules determined by the [`step`](/en-US/docs/Web/HTML/Element/input#step) attribute (that is, it's not evenly divisible by the step value), or `false` if it does fit the step rule. If `true`, the element matches the {{cssxref(":invalid")}} and {{cssxref(":out-of-range")}} CSS pseudo-classes.
+  - : A boolean value that is `true` if the value does not fit the rules determined by the [`step`](/en-US/docs/Web/HTML/Element/input#step) attribute (that is, it's not evenly divisible by the step value), or `false` if it does fit the step rule. If `true`, the element matches the {{cssxref(":invalid")}} CSS pseudo-class.
 - {{domxref("ValidityState.tooLong", "tooLong")}} {{ReadOnlyInline}}
   - : A boolean value that is `true` if the value exceeds the specified `maxlength` for {{domxref("HTMLInputElement")}} or {{domxref("HTMLTextAreaElement")}} objects, or `false` if its length is less than or equal to the maximum length. _Note: This property is never `true` in Gecko, because elements' values are prevented from being longer than `maxlength`._ If `true`, the element matches the {{cssxref(":invalid")}} and {{cssxref(":out-of-range")}} CSS pseudo-classes.
 - {{domxref("ValidityState.tooShort", "tooShort")}} {{ReadOnlyInline}}
   - : A boolean value that is `true` if the value fails to meet the specified `minlength` for {{domxref("HTMLInputElement")}} or {{domxref("HTMLTextAreaElement")}} objects, or `false` 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.
 - {{domxref("ValidityState.typeMismatch", "typeMismatch")}} {{ReadOnlyInline}}
   - : A boolean value that is `true` if the value is not in the required syntax (when [`type`](/en-US/docs/Web/HTML/Element/input#type) is `email` or `url`), or `false` if the syntax is correct. If `true`, the element matches the {{cssxref(":invalid")}} CSS pseudo-class.
-- `valid` {{ReadOnlyInline}}
+- {{domxref("ValidityState.valid", "valid")}} {{ReadOnlyInline}}
   - : A boolean value that is `true` if the element meets all its validation constraints, and is therefore considered to be valid, or `false` if it fails any constraint. If `true`, the element matches the {{cssxref(":valid")}} CSS pseudo-class; the {{cssxref(":invalid")}} CSS pseudo-class otherwise.
 - {{domxref("ValidityState.valueMissing", "valueMissing")}} {{ReadOnlyInline}}
   - : A boolean value that is `true` if the element has a [`required`](/en-US/docs/Web/HTML/Element/input#required) attribute, but no value, or `false` otherwise. If `true`, the element matches the {{cssxref(":invalid")}} CSS pseudo-class.

@@ -8,14 +8,18 @@ browser-compat: api.ValidityState.patternMismatch
 
 {{APIRef("HTML DOM")}}
 
-The read-only **`patternMismatch`** property of a **[`ValidityState`](/en-US/docs/Web/API/ValidityState)** object indicates if the value of an {{HTMLElement("input")}}, after having been edited by the user, does not conform to the constraints set by the element's [`pattern`](/en-US/docs/Web/HTML/Attributes/pattern) attribute.
+The read-only **`patternMismatch`** property of the [`ValidityState`](/en-US/docs/Web/API/ValidityState) interface indicates if the value of an {{HTMLElement("input")}}, after having been edited by the user, does not conform to the constraints set by the element's [`pattern`](/en-US/docs/Web/HTML/Attributes/pattern) attribute.
 
 The `patternMismatch` property will be true if and only if the following conditions are all true:
 
 - the field supports the [`pattern`](/en-US/docs/Web/HTML/Attributes/pattern) attribute — which means the {{HTMLElement("input")}} is of `type` {{HTMLElement("input/text", "text")}}, {{HTMLElement("input/tel", "tel")}}, {{HTMLElement("input/email", "email")}}, {{HTMLElement("input/url", "url")}}, {{HTMLElement("input/password", "password")}}, or {{HTMLElement("input/search", "search")}}
 - the [`pattern`](/en-US/docs/Web/HTML/Attributes/pattern) attribute contains a valid regular expression
 - the {{HTMLElement("input")}} value doesn't conform to the constraints set by the [`pattern`](/en-US/docs/Web/HTML/Attributes/pattern) value.
 
+## Value
+
+A boolean that is `true` if the `ValidityState` object does not conform to the constraints.
+
 ## Examples
 
 Given the following:

@@ -8,17 +8,65 @@ browser-compat: api.ValidityState.rangeOverflow
 
 {{APIRef("HTML DOM")}}
 
-The read-only **`rangeOverflow`** property of a **[`ValidityState`](/en-US/docs/Web/API/ValidityState)** object indicates if the value of an {{HTMLElement("input")}}, after having been edited by the user, does not conform to the constraints set by the element's [`max`](/en-US/docs/Web/HTML/Attributes/max) attribute.
+The read-only **`rangeOverflow`** property of the [`ValidityState`](/en-US/docs/Web/API/ValidityState) interface indicates if the value of an {{HTMLElement("input")}}, after having been edited by the user, does not conform to the constraints set by the element's [`max`](/en-US/docs/Web/HTML/Attributes/max) attribute.
 
 If the field is numeric in nature, including the {{HTMLElement("input/date", "date")}}, {{HTMLElement("input/month", "month")}}, {{HTMLElement("input/week", "week")}}, {{HTMLElement("input/time", "time")}}, {{HTMLElement("input/datetime-local", "datetime-local")}}, {{HTMLElement("input/number", "number")}} and {{HTMLElement("input/range", "range")}} types and a `max` value is set, if the value doesn't conform to the constraints set by the [`max`](/en-US/docs/Web/HTML/Attributes/step) value, the `rangeOverflow` property will be true.
 
-Given the following:
+## Value
+
+A boolean that is `true` if the `ValidityState` does not conform to the constraints.
+
+## Examples
+
+### Input with numeric overflow
+
+The following example checks the validity of a [numeric input element](/en-US/docs/Web/HTML/Element/input/number).
+A constraint has been added using the [`max` attribute](/en-US/docs/Web/HTML/Element/input/number#max) which sets a maximum value of `18` for the input.
+If the user enters a number higher than 18, the element fails constraint validation, and the styles matching {{cssxref(":invalid")}} and {{cssxref(":out-of-range")}} CSS pseudo-classes
+
+```css
+/* or :invalid */
+input:out-of-range {
+  outline: red solid 3px;
+}
+```
+
+```css hidden
+body {
+  margin: 0.5rem;
+}
+pre {
+  padding: 1rem;
+  height: 2rem;
+  background-color: lightgrey;
+  outline: 1px solid grey;
+}
+```
 
 ```html
-<input type="number" min="20" max="40" step="2" />
+<pre id="log">Validation logged here...</pre>
+<input type="number" id="age" max="18" />
+```
+
+```js
+const userInput = document.getElementById("age");
+const logElement = document.getElementById("log");
+
+function log(text) {
+  logElement.innerText = text;
+}
+
+userInput.addEventListener("input", () => {
+  userInput.reportValidity();
+  if (userInput.validity.rangeOverflow) {
+    log("Number is too high!");
+  } else {
+    log("Input is valid…");
+  }
+});
 ```
 
-if `value > 40`, `rangeOverflow` will be true. When `true`, the element matches the {{cssxref(":invalid")}} and {{cssxref(":out-of-range")}} CSS pseudo-classes.
+{{EmbedLiveSample("input_with_numeric_overflow", "100%", "140")}}
 
 ## Specifications
 

@@ -8,17 +8,65 @@ browser-compat: api.ValidityState.rangeUnderflow
 
 {{APIRef("HTML DOM")}}
 
-The read-only **`rangeUnderflow`** property of a **[`ValidityState`](/en-US/docs/Web/API/ValidityState)** object indicates if the value of an {{HTMLElement("input")}}, after having been edited by the user, does not conform to the constraints set by the element's [`min`](/en-US/docs/Web/HTML/Attributes/min) attribute.
+The read-only **`rangeUnderflow`** property of the [`ValidityState`](/en-US/docs/Web/API/ValidityState) interface indicates if the value of an {{HTMLElement("input")}}, after having been edited by the user, does not conform to the constraints set by the element's [`min`](/en-US/docs/Web/HTML/Attributes/min) attribute.
 
 If the field is numeric in nature, including the {{HTMLElement("input/date", "date")}}, {{HTMLElement("input/month", "month")}}, {{HTMLElement("input/week", "week")}}, {{HTMLElement("input/time", "time")}}, {{HTMLElement("input/datetime-local", "datetime-local")}}, {{HTMLElement("input/number", "number")}} and {{HTMLElement("input/range", "range")}} types and a `min` value is set, if the value doesn't conform to the constraints set by the [`min`](/en-US/docs/Web/HTML/Attributes/step) value, the `rangeUnderflow` property will be true.
 
-Given the following:
+## Value
+
+A boolean that is `true` if the `ValidityState` does not conform to the constraints.
+
+## Examples
+
+### Input with numeric underflow
+
+The following example checks the validity of a [numeric input element](/en-US/docs/Web/HTML/Element/input/number).
+A constraint has been added using the [`min` attribute](/en-US/docs/Web/HTML/Element/input/number#min) which sets a minimum value of `18` for the input.
+If the user enters a number lower than 18, the element fails constraint validation, and the styles matching {{cssxref(":invalid")}} and {{cssxref(":out-of-range")}} CSS pseudo-classes
+
+```css
+/* or :invalid */
+input:out-of-range {
+  outline: red solid 3px;
+}
+```
+
+```css hidden
+body {
+  margin: 0.5rem;
+}
+pre {
+  padding: 1rem;
+  height: 2rem;
+  background-color: lightgrey;
+  outline: 1px solid grey;
+}
+```
 
 ```html
-<input type="number" min="20" max="40" step="2" />
+<pre id="log">Validation logged here...</pre>
+<input type="number" id="age" min="18" />
+```
+
+```js
+const userInput = document.getElementById("age");
+const logElement = document.getElementById("log");
+
+function log(text) {
+  logElement.innerText = text;
+}
+
+userInput.addEventListener("input", () => {
+  userInput.reportValidity();
+  if (userInput.validity.rangeUnderflow) {
+    log("Number is too low!");
+  } else {
+    log("Valid…");
+  }
+});
 ```
 
-if `value < 20`, `rangeUnderflow` will be true. When `true`, the element matches the {{cssxref(":invalid")}} and {{cssxref(":out-of-range")}} CSS pseudo-classes.
+{{EmbedLiveSample("input_with_numeric_underflow", "100%", "140")}}
 
 ## Specifications