From ca2961e7cb1861e307b279c05df8a8f08482934c Mon Sep 17 00:00:00 2001 From: estelle Date: Wed, 18 Sep 2024 16:56:44 -0700 Subject: [PATCH 1/2] New pages: HTMLxElement.setCustomValidity() --- .../setcustomvalidity/index.md | 58 +++++++++++++++++ .../setcustomvalidity/index.md | 58 +++++++++++++++++ .../setcustomvalidity/index.md | 60 +++++++++++++++++ .../setcustomvalidity/index.md | 65 +++++++++++++++++++ 4 files changed, 241 insertions(+) create mode 100644 files/en-us/web/api/htmlbuttonelement/setcustomvalidity/index.md create mode 100644 files/en-us/web/api/htmlfieldsetelement/setcustomvalidity/index.md create mode 100644 files/en-us/web/api/htmloutputelement/setcustomvalidity/index.md create mode 100644 files/en-us/web/api/htmltextareaelement/setcustomvalidity/index.md diff --git a/files/en-us/web/api/htmlbuttonelement/setcustomvalidity/index.md b/files/en-us/web/api/htmlbuttonelement/setcustomvalidity/index.md new file mode 100644 index 000000000000000..78eb12c820ce1de --- /dev/null +++ b/files/en-us/web/api/htmlbuttonelement/setcustomvalidity/index.md @@ -0,0 +1,58 @@ +--- +title: "HTMLButtonElement: setCustomValidity() method" +short-title: setCustomValidity() +slug: Web/API/HTMLButtonElement/setCustomValidity +page-type: web-api-instance-method +browser-compat: api.HTMLButtonElement.setCustomValidity +--- + +{{ APIRef("HTML DOM") }} + +The **`setCustomValidity()`** method of the {{DOMxRef("HTMLButtonElement")}} interface sets the custom validity message for the {{htmlelement("button")}} element to the specified message. Use the empty string to indicate that the element does _not_ have a custom validity error. + +## Syntax + +```js-nolint +setCustomValidity(string) +``` + +### Parameters + +- `string` + - : The string containing the error message. + +### Return value + +None ({{jsxref("undefined")}}). + +## Examples + +```js +const errorButton = document.getElementById("checkErrors"); +const errors = issuesToReport(); +if (errors) { + errorButton.setCustomValidity("There is an error"); +} else { + errorButton.setCustomValidity(""); +} +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{HTMLelement("button")}} +- {{domxref("HTMLButtonElement")}} +- {{domxref("HTMLButtonElement.validity")}} +- {{domxref("HTMLButtonElement.checkValidity()")}} +- {{domxref("HTMLButtonElement.reportValidity()")}} +- [Form validation](/en-US/docs/Web/HTML/Constraint_validation). +- [Learn: Client-side form validation](/en-US/docs/Learn/Forms/Form_validation) +- [Guide: Constraint validation](/en-US/docs/Web/HTML/Constraint_validation) +- CSS {{cssxref(":valid")}} and {{cssxref(":invalid")}} pseudo-classes diff --git a/files/en-us/web/api/htmlfieldsetelement/setcustomvalidity/index.md b/files/en-us/web/api/htmlfieldsetelement/setcustomvalidity/index.md new file mode 100644 index 000000000000000..67b527548c526d0 --- /dev/null +++ b/files/en-us/web/api/htmlfieldsetelement/setcustomvalidity/index.md @@ -0,0 +1,58 @@ +--- +title: "HTMLFieldSetElement: setCustomValidity() method" +short-title: setCustomValidity() +slug: Web/API/HTMLFieldSetElement/setCustomValidity +page-type: web-api-instance-method +browser-compat: api.HTMLFieldSetElement.setCustomValidity +--- + +{{ APIRef("HTML DOM") }} + +The **`setCustomValidity()`** method of the {{DOMxRef("HTMLFieldSetElement")}} interface sets the custom validity message for the {{htmlelement("fieldset")}} element to the specified message. Use the empty string to indicate that the element does _not_ have a custom validity error. + +## Syntax + +```js-nolint +setCustomValidity(string) +``` + +### Parameters + +- `string` + - : The string containing the error message. + +### Return value + +None ({{jsxref("undefined")}}). + +## Examples + +```js +const errorFieldSet = document.getElementById("checkErrors"); +const errors = issuesToReport(); +if (errors) { + errorFieldSet.setCustomValidity("There is an error"); +} else { + errorFieldSet.setCustomValidity(""); +} +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{HTMLelement("fieldset")}} +- {{domxref("HTMLFieldSetElement")}} +- {{domxref("HTMLFieldSetElement.validity")}} +- {{domxref("HTMLFieldSetElement.checkValidity()")}} +- {{domxref("HTMLFieldSetElement.reportValidity()")}} +- [Form validation](/en-US/docs/Web/HTML/Constraint_validation). +- [Learn: Client-side form validation](/en-US/docs/Learn/Forms/Form_validation) +- [Guide: Constraint validation](/en-US/docs/Web/HTML/Constraint_validation) +- CSS {{cssxref(":valid")}} and {{cssxref(":invalid")}} pseudo-classes diff --git a/files/en-us/web/api/htmloutputelement/setcustomvalidity/index.md b/files/en-us/web/api/htmloutputelement/setcustomvalidity/index.md new file mode 100644 index 000000000000000..7152f5615788ab0 --- /dev/null +++ b/files/en-us/web/api/htmloutputelement/setcustomvalidity/index.md @@ -0,0 +1,60 @@ +--- +title: "HTMLOutputElement: setCustomValidity() method" +short-title: setCustomValidity() +slug: Web/API/HTMLOutputElement/setCustomValidity +page-type: web-api-instance-method +browser-compat: api.HTMLOutputElement.setCustomValidity +--- + +{{ APIRef("HTML DOM") }} + +The **`setCustomValidity()`** method of the {{DOMxRef("HTMLOutputElement")}} interface sets the custom validity message for the {{htmlelement("output")}} element to the specified message. Use the empty string to indicate that the element does _not_ have a custom validity error. + +## Syntax + +```js-nolint +setCustomValidity(string) +``` + +### Parameters + +- `string` + - : The string containing the error message. + +### Return value + +None ({{jsxref("undefined")}}). + +## Examples + +In this example, if the ``'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 + +- {{HTMLelement("output")}} +- {{domxref("HTMLOutputElement")}} +- {{domxref("HTMLOutputElement.validity")}} +- {{domxref("HTMLOutputElement.checkValidity()")}} +- {{domxref("HTMLOutputElement.reportValidity()")}} +- [Form validation](/en-US/docs/Web/HTML/Constraint_validation). +- [Learn: Client-side form validation](/en-US/docs/Learn/Forms/Form_validation) +- [Guide: Constraint validation](/en-US/docs/Web/HTML/Constraint_validation) +- CSS {{cssxref(":valid")}} and {{cssxref(":invalid")}} pseudo-classes diff --git a/files/en-us/web/api/htmltextareaelement/setcustomvalidity/index.md b/files/en-us/web/api/htmltextareaelement/setcustomvalidity/index.md new file mode 100644 index 000000000000000..2d233542c6fd518 --- /dev/null +++ b/files/en-us/web/api/htmltextareaelement/setcustomvalidity/index.md @@ -0,0 +1,65 @@ +--- +title: "HTMLTextAreaElement: setCustomValidity() method" +short-title: setCustomValidity() +slug: Web/API/HTMLTextAreaElement/setCustomValidity +page-type: web-api-instance-method +browser-compat: api.HTMLTextAreaElement.setCustomValidity +--- + +{{ APIRef("HTML DOM") }} + +The **`setCustomValidity()`** method of the {{DOMxRef("HTMLTextAreaElement")}} interface sets the custom validity message for the {{htmlelement("textarea")}} element to the specified message. Use the empty string to indicate that the element does _not_ have a custom validity error. + +## Syntax + +```js-nolint +setCustomValidity(string) +``` + +### Parameters + +- `string` + - : The string containing the error message. + +### Return value + +None ({{jsxref("undefined")}}). + +## Examples + +In this example, if the `