ContextQMD
Back to Content

HTMLOutputElement: setCustomValidity() method

files/en-us/web/api/htmloutputelement/setcustomvalidity/index.md

latest2.0 KB
Original Source

{{ APIRef("HTML DOM") }}

The setCustomValidity() method of the {{DOMxRef("HTMLOutputElement")}} interface sets the custom validity message for the {{htmlelement("output")}} element. Use the empty string to indicate that the element does not have a custom validity error.

The <output> element is not a candidate for constraint validation. The {{DOMxRef("HTMLOutputElement.reportValidity()", "reportValidity()")}} method will not cause the custom error message to be displayed to the user, but does set the {{DOMxRef("ValidityState.customError", "customError")}} property of the element's {{DOMxRef("ValidityState")}} object to true and the {{DOMxRef("ValidityState.valid", "valid")}} property to false.

Syntax

js-nolint
setCustomValidity(string)

Parameters

  • string
    • : The string containing the error message. The empty string removes any custom validity errors.

Return value

None ({{jsxref("undefined")}}).

Examples

In this example, if the <output>'s {{domxref("HTMLOutputElement.value", "value")}} is not a non-zero number, we set a custom error message. If it is a number, we set the custom error to an empty string:

js
const cart = document.getElementById("cart-form");
const total = cart.elements("total");
if (parseFloat(total.value)) {
  errorOutput.setCustomValidity("");
} else {
  errorOutput.setCustomValidity("There is an error");
}

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also