-
Notifications
You must be signed in to change notification settings - Fork 22.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
New pages: HTMLxElement.setCustomValidity() #35948
Changes from 1 commit
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
@@ -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. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
||||||
### 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 |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Mention that |
||
|
||
## 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 |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 `<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 | ||
|
||
- {{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 |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 `<textarea>`'s doesn't pass constraint validation, we provide custom errors based on the constraint that is failing validation. If the value is valid, we set the custom error to an empty string: | ||
|
||
```js | ||
const comment = document.getElementById("comment"); | ||
if (comment.validity.valueMissing) { | ||
comment.setCustomValidity("We can't submit a blank comment!"); | ||
} else if (comment.validity.tooShort) { | ||
comment.setCustomValidity("Tell us more! Your comment is too short."); | ||
} else if (comment.validity.tooLong) { | ||
comment.setCustomValidity( | ||
"Loquacious much? Keep it to under 800 characters!", | ||
); | ||
} else { | ||
comment.setCustomValidity(""); | ||
} | ||
``` | ||
|
||
## Specifications | ||
|
||
{{Specifications}} | ||
|
||
## Browser compatibility | ||
|
||
{{Compat}} | ||
|
||
## See also | ||
|
||
- {{HTMLelement("textarea")}} | ||
- {{domxref("HTMLTextAreaElement")}} | ||
- {{domxref("HTMLTextAreaElement.validity")}} | ||
- {{domxref("HTMLTextAreaElement.checkValidity()")}} | ||
- {{domxref("HTMLTextAreaElement.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 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.