Skip to content

Commit

Permalink
Merge branch 'main' into fix/dynamic_button_label
Browse files Browse the repository at this point in the history
  • Loading branch information
himanshugarg authored Dec 24, 2024
2 parents 2e2dc14 + 879db96 commit 900247e
Show file tree
Hide file tree
Showing 7 changed files with 9 additions and 9 deletions.
2 changes: 1 addition & 1 deletion files/en-us/web/api/elementinternals/setvalidity/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ setValidity(flags, message, anchor)
- `badInput`
- : A boolean value that is `true` if the user has provided input that the browser is unable to convert.
- `customError`
- : 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.
- : 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('HTMLInputElement.setCustomValidity', 'setCustomValidity()')}} method.

> [!NOTE]
> To set all flags to `false`, indicating that this element passes all constraints validation, pass in an empty object `{}`. In this case, you do not need to also pass a `message`.
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/api/htmlbuttonelement/validity/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ A {{domxref("ValidityState")}} object.

## Examples

The following example demonstrates that a `<button>` is in an invalid state when a {{domxref("ValidityState/customError", "customError")}} is set; in this state, the `validityState`'s `validity` property is `false`, while {{domxref("HTMLFieldSetElement/checkValidity", "checkValidity()")}} returns `true` if the button's {{domxref("HTMLButtonElement/type", "type")}} is not `"submit"`, because such buttons are not candidates for [constraint validation](/en-US/docs/Web/HTML/Constraint_validation).
The following example demonstrates that a `<button>` is in an invalid state when a {{domxref("ValidityState/customError", "customError")}} is set; in this state, the `validityState`'s `validity` property is `false`, while {{domxref("HTMLButtonElement/checkValidity", "checkValidity()")}} returns `true` if the button's {{domxref("HTMLButtonElement/type", "type")}} is not `"submit"`, because such buttons are not candidates for [constraint validation](/en-US/docs/Web/HTML/Constraint_validation).

```js
const button = document.getElementById("myButton");
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/api/htmlinputelement/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ Some properties only apply to input element types that support the corresponding

- {{domxref("HTMLInputElement.validationMessage", "validationMessage")}} {{ReadOnlyInline}}

- : Returns a localized message that describes the validation constraints that the control does not satisfy (if any). This is the empty string if the control is not a candidate for constraint validation ([`willValidate`](/en-US/docs/Web/API/HTMLObjectElement/willValidate) is `false`), or it satisfies its constraints. This value can be set by the {{domxref("HTMLInputElement.setCustomValidity()", "setCustomValidity()")}} method.
- : Returns a localized message that describes the validation constraints that the control does not satisfy (if any). This is the empty string if the control is not a candidate for constraint validation ({{domxref("HTMLInputElement.willValidate", "willValidate")}} is `false`), or it satisfies its constraints. This value can be set by the {{domxref("HTMLInputElement.setCustomValidity()", "setCustomValidity()")}} method.

- {{domxref("HTMLInputElement.validity", "validity")}} {{ReadOnlyInline}}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ console.log(element.checkValidity());

## See also

- {{domxref("HTMLTextAreaElement.reportValidity()")}}
- {{domxref("HTMLSelectElement.reportValidity()")}}
- {{HTMLElement("textarea")}}
- {{HTMLElement("form")}}
- [Learn: Client-side form validation](/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation)
Expand Down
6 changes: 3 additions & 3 deletions files/en-us/web/api/validitystate/customerror/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ 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.
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("HTMLInputElement.setCustomValidity", "setCustomValidity()")}} method.

## Value

Expand All @@ -18,8 +18,8 @@ A boolean that is `true` if a custom error message has been set to a non-empty s

### 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).
In this example, {{domxref("HTMLInputElement.setCustomValidity", "setCustomValidity()")}} sets a custom error message when a form submission contains user input that's considered invalid.
The "Validate input" button calls {{domxref("HTMLInputElement.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.
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/api/validitystate/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,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.
- {{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.
- : 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('HTMLInputElement.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.
- {{domxref("ValidityState.rangeOverflow", "rangeOverflow")}} {{ReadOnlyInline}}
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/css/gradient/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
title: <gradient>
slug: Web/CSS/gradient
page-type: css-type
browser-compat: css.types.image.gradient
browser-compat: css.types.gradient
---

{{CSSRef}}
Expand Down

0 comments on commit 900247e

Please sign in to comment.