diff --git a/files/ja/web/api/elementinternals/checkvalidity/index.md b/files/ja/web/api/elementinternals/checkvalidity/index.md new file mode 100644 index 00000000000000..1c36f8b893f51a --- /dev/null +++ b/files/ja/web/api/elementinternals/checkvalidity/index.md @@ -0,0 +1,52 @@ +--- +title: "ElementInternals: checkValidity() メソッド" +short-title: checkValidity() +slug: Web/API/ElementInternals/checkValidity +l10n: + sourceCommit: 86215eff9beccf2e069be9109347ad830cc5e9c4 +--- + +{{APIRef("DOM")}} + +**`checkValidity()`** は {{domxref("ElementInternals")}} インタフェイスのメソッドで、要素が適用された[制約検証](/ja/docs/Web/HTML/Constraint_validation)のルールを満たしているかどうかをチェックします。 + +もし `checkValidity` が `false` を返したら、キャンセル可能な [invalid イベント](/ja/docs/Web/API/HTMLInputElement/invalid_event)が要素で発生します。 + +## 構文 + +```js-nolint +checkValidity() +``` + +### 引数 + +なし。 + +### 返値 + +論理値で、要素がすべての検証される制約に合格していれば `true` を返します。 + +### 例外 + +- `NotSupportedError` {{domxref("DOMException")}} + - : 要素の `formAssociated` プロパティが `true` に設定されていない場合に発生します。 + +## 例 + +以下の例では、 {{domxref("ElementInternals.setValidity()")}} を使用して、要素が検証ルールを満たしていないことを示します。 `checkValidity()` を呼び出すと `false` が返されます。再度 `setValidity` を呼び出し、今度はすべてのルールが false になっていることを示すと、`checkValidity()` は `true` を返します。 + +```js +let element = document.getElementById("join-checkbox"); +element.internals_.setValidity({ valueMissing: true }, "メッセージ"); +console.log(element.internals_.checkValidity()); // false +element.internals_.setValidity({}); +console.log(element.internals_.checkValidity()); // true +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/elementinternals/form/index.md b/files/ja/web/api/elementinternals/form/index.md new file mode 100644 index 00000000000000..e48443c41936e7 --- /dev/null +++ b/files/ja/web/api/elementinternals/form/index.md @@ -0,0 +1,53 @@ +--- +title: "ElementInternals: form プロパティ" +short-title: form +slug: Web/API/ElementInternals/form +l10n: + sourceCommit: 86215eff9beccf2e069be9109347ad830cc5e9c4 +--- + +{{APIRef("DOM")}} + +**`form`** は {{domxref("ElementInternals")}} インターフェイスの読み取り専用プロパティで、この要素に関連付けられた {{domxref("HTMLFormElement")}} を返します。 + +## 値 + +{{domxref("HTMLFormElement")}} です。 + +## 例 + +次の例では、 ID が `myForm` のフォーム内にカスタムチェックボックスコンポーネントを配置しています。 +コンソールに `form.length` を出力すると、 {{domxref("HTMLFormElement.length")}} という値が得られます。 + +```html +
+ + Join newsletter +
+``` + +```js +class CustomCheckbox extends HTMLElement { + static formAssociated = true; + #internals; + + constructor() { + super(); + this.#internals = this.attachInternals(); + } + + connectedCallback() { + console.log(this.#internals.form.length); + } +} + +window.customElements.define("custom-checkbox", CustomCheckbox); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/elementinternals/index.md b/files/ja/web/api/elementinternals/index.md new file mode 100644 index 00000000000000..ea98666795e736 --- /dev/null +++ b/files/ja/web/api/elementinternals/index.md @@ -0,0 +1,169 @@ +--- +title: ElementInternals +slug: Web/API/ElementInternals +l10n: + sourceCommit: 835d6632d59993861a0458510402787f8a2c3cb3 +--- + +{{APIRef("DOM")}} + +**`ElementInternals`** は [Document Object Model](/ja/docs/Web/API/Document_Object_Model) のインターフェイスで、カスタム要素を HTML フォームに完全に参加させる方法をウェブ開発者に提供します。標準的な HTML フォーム要素を扱うのと同じように、これらの要素を扱うためのユーティリティを提供し、 [Accessibility Object Model](https://wicg.github.io/aom/explainer.html) も要素で使えるようにします。 + +## コンストラクター + +このインターフェイスにはコンストラクターがありません。 `ElementInternals` オブジェクトは {{domxref("HTMLElement.attachInternals()")}} を呼び出したときに返されます。 + +## インスタンスプロパティ + +- {{domxref("ElementInternals.shadowRoot")}} {{ReadOnlyInline}} + - : この要素に関連付けられた {{domxref("ShadowRoot")}} オブジェクトを返します。 +- {{domxref("ElementInternals.form")}} {{ReadOnlyInline}} + - : この要素に関連付けられた {{domxref("HTMLFormElement")}} を返します。 +- {{domxref("ElementInternals.states")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : この要素に関連付けられた {{domxref("CustomStateSet")}} を返します。 +- {{domxref("ElementInternals.willValidate")}} {{ReadOnlyInline}} + - : 論理値で、要素が[制約検証](/ja/docs/Web/HTML/Constraint_validation)の候補である送信可能要素である場合に true を返します。 +- {{domxref("ElementInternals.validity")}} {{ReadOnlyInline}} + - : このオブジェクトは、制約検証に関して、その要素が取りうるさまざまな有効性の状態を表します。 +- {{domxref("ElementInternals.validationMessage")}} {{ReadOnlyInline}} + - : 文字列で、この要素の検証メッセージが入ります。 +- {{domxref("ElementInternals.labels")}} {{ReadOnlyInline}} + - : この要素に関連付けられているすべてのラベル要素の {{domxref("NodeList")}} を返します。 + +### ARIA から取り込まれたインスタンスプロパティ + +`ElementInternals` インターフェイスには以下のプロパティがあり、`ARIAMixin` ミックスインで定義されています。 + +> **メモ:** これらは、カスタム要素に既定のアクセシビリティ上の意味を定義できるようにするために取り込まれています。これらは作者が定義した属性によって上書きされる可能性がありますが、作者が属性を削除したり追加しなかったりした場合でも、既定の意味が保持されるようにします。詳しくは、 [Accessibility Object Model explainer](https://wicg.github.io/aom/explainer.html#default-semantics-for-custom-elements-via-the-elementinternals-object) を参照してください。 + +- {{domxref("ElementInternals.ariaAtomic")}} + - : [`aria-atomic`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-atomic) 属性を反映した文字列で、[`aria-relevant`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-relevant)属性で定義された変更通知に基づいて、支援技術が変更された領域のすべてを提示するか、一部のみを提示するかを示します。 +- {{domxref("ElementInternals.ariaAutoComplete")}} + - : [`aria-autocomplete`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-autocomplete) 属性を反映した文字列で、テキスト入力が、コンボボックス、検索ボックス、またはテキストボックスに対するユーザーの意図する値の 1 つまたは複数の予測を表示するトリガーとなり得るかどうかを示し、予測が行われた場合にどのように表示されるかを指定します。 +- {{domxref("ElementInternals.ariaBusy")}} + - : [`aria-busy`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-busy) 属性を反映した文字列で、要素が変更されているかどうかを示すもので、支援技術はユーザーに公開する前に変更が完了するまで待ちたい場合があります。 +- {{domxref("ElementInternals.ariaChecked")}} + - : [`aria-checked`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-checked) 属性を反映した文字列で、チェックボックス、ラジオボタン、その他のチェック状態を持つウィジェットの現在の「チェックされた」状態を示します。 +- {{domxref("ElementInternals.ariaColCount")}} + - : [`aria-colcount`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-colcount) 属性を反映した文字列で、テーブル、グリッド、ツリーグリッドの列数を定義します。 +- {{domxref("ElementInternals.ariaColIndex")}} + - : [`aria-colindex`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-colindex) 属性を反映した文字列で、テーブル、グリッド、ツリーグリッド内の列の総数に対する要素の列インデックスまたは位置を定義します。 +- {{domxref("ElementInternals.ariaColSpan")}} + - : [`aria-colspan`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-colspan) 属性を反映した文字列で、テーブル、グリッド、ツリーグリッド内のセルやグリッドセルにまたがる列の数を定義します。 +- {{domxref("ElementInternals.ariaCurrent")}} + - : [`aria-current`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-current) 属性を反映した文字列で、コンテナーや関連する要素の集合の中で、現在のアイテムを表す要素を表します。 +- {{domxref("ElementInternals.ariaDescription")}} + - : [`aria-description`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-description) 属性を反映した文字列で、現在の ElementInternals を説明または注釈する文字列値を定義します。 +- {{domxref("ElementInternals.ariaDisabled")}} + - : [`aria-disabled`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-disabled) 属性を反映した文字列で、その要素が知覚可能であるが無効であり、編集やその他の操作ができないことを示します。 +- {{domxref("ElementInternals.ariaExpanded")}} + - : [`aria-expanded`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) 属性を反映した文字列で、この要素が所有または制御するグループ化要素が展開されているか、折りたたまれているかを示します。 +- {{domxref("ElementInternals.ariaHasPopup")}} + - : [`aria-haspopup`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup) 属性を反映した文字列で、 ElementInternals によって起動される、メニューやダイアログのような操作可能なポップアップ要素の有無と種類を示します。 +- {{domxref("ElementInternals.ariaHidden")}} + - : [`aria-hidden`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-hidden) 属性を反映した文字列で、その要素がアクセシビリティ API に公開されているかどうかを示します。 +- {{domxref("ElementInternals.ariaKeyShortcuts")}} + - : [`aria-keyshortcuts`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-keyshortcuts) 属性を反映した文字列で、作者が ElementInternals をアクティブにしたりフォーカスを与えたりするために実装したキーボードショートカットを示します。 +- {{domxref("ElementInternals.ariaLabel")}} + - : [`aria-label`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-label) 属性を反映した文字列で、現在の ElementInternals にラベルを付ける文字列値を定義します。 +- {{domxref("ElementInternals.ariaLevel")}} + - : [`aria-level`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-level) 属性を反映した文字列で、構造内の要素の階層レベルを定義します。 +- {{domxref("ElementInternals.ariaLive")}} + - : [`aria-live`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-live) 属性を反映した文字列で、要素が更新されることを示し、ユーザエージェント、支援技術、ユーザーがライブ領域から期待できる更新の種類を記述します。 +- {{domxref("ElementInternals.ariaModal")}} + - : [`aria-modal`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-modal) 属性を反映した文字列で、要素が表示されたときにモーダルであるかどうかを示します。 +- {{domxref("ElementInternals.ariaMultiline")}} + - : [`aria-multiline`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-multiline) 属性を反映した文字列で、テキストボックスが複数行の入力を受け付けるか、 1 行のみの入力を受け付けるかを示します。 +- {{domxref("ElementInternals.ariaMultiSelectable")}} + - : [`aria-multiselectable`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-multiselectable) 属性を反映した文字列で、ユーザーが現在の選択可能な子孫から複数のアイテムを選択できることを示します。 +- {{domxref("ElementInternals.ariaOrientation")}} + - : [`aria-orientation`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-orientation) 属性を反映した文字列で、要素の向きが水平であるか、垂直であるか、不明または曖昧であるかを示します。 +- {{domxref("ElementInternals.ariaPlaceholder")}} + - : [`aria-placeholder`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-placeholder) 属性を反映した文字列で、コントロールに値がない場合に、ユーザーのデータ入力を補助するための短いヒントを定義します。 +- {{domxref("ElementInternals.ariaPosInSet")}} + - : [`aria-posinset`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-posinset) 属性を反映した文字列で、現在のリストアイテムまたはツリーアイテムの集合における要素の番号または位置を定義します。 +- {{domxref("ElementInternals.ariaPressed")}} + - : [`aria-pressed`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-pressed) 属性を反映した文字列で、トグルボタンの現在の「押されている」状態を示します。 +- {{domxref("ElementInternals.ariaReadOnly")}} + - : [`aria-readonly`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-readonly) 属性を反映した文字列で、その要素が編集可能ではないが、それ以外は操作可能であることを示します。 +- {{domxref("ElementInternals.ariaRelevant")}} {{Non-standard_Inline}} + - : [`aria-relevant`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-relevant) 属性を反映した文字列で、ライブ領域内のアクセシビリティツリーが変更されたときに、ユーザーエージェントがどのような通知を行うかを示します。これは、 `aria-live` 領域内のどのような変更が関連性があり、通知されるべきかを記述するために使用されます。 +- {{domxref("ElementInternals.ariaRequired")}} + - : [`aria-required`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-required) 属性を反映した文字列で、これは、フォームを送信する前に、その要素でユーザー入力が必要であることを示します。 +- {{domxref("ElementInternals.role")}} + - : ARIA ロールを含む文字列です。 ARIA ロールの完全なリストは [ARIA 技術のページ](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques)にあります。 +- {{domxref("ElementInternals.ariaRoleDescription")}} + - : [`aria-roledescription`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-roledescription) 属性を反映した文字列で、要素のロールのための、人間が読める、作者がローカライズした説明を定義します。 +- {{domxref("ElementInternals.ariaRowCount")}} + - : [`aria-rowcount`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-rowcount) 属性を反映した文字列で、これは、テーブル、グリッド、ツリーグリッドの行の総数を定義します。 +- {{domxref("ElementInternals.ariaRowIndex")}} + - : [`aria-rowindex`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-rowindex) 属性を反映した文字列で、テーブル、グリッド、ツリーグリッド内の行の総数に対する要素の行インデックスまたは位置を定義します。 +- {{domxref("ElementInternals.ariaRowSpan")}} + - : [`aria-rowspan`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-rowspan) 属性を反映した文字列で、これは、テーブル、グリッド、ツリーグリッド内のセルまたはグリッドセルがまたがる行の数を定義します。 +- {{domxref("ElementInternals.ariaSelected")}} + - : [`aria-selected`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-selected) 属性を反映した文字列で、選択状態を持つ要素の現在の「選択されている」状態を示します。 +- {{domxref("ElementInternals.ariaSetSize")}} + - : [`aria-setsize`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-setsize) 属性を反映した文字列で、現在のリストアイテムまたはツリーアイテムのセットに含まれるアイテムの数を定義します。 +- {{domxref("ElementInternals.ariaSort")}} + - : [`aria-sort`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-sort) 属性を反映した文字列で、テーブルやグリッドのアイテムが昇順でソートされているか降順でソートされているかを示します。 +- {{domxref("ElementInternals.ariaValueMax")}} + - : [`aria-valueMax`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-valuemax) 属性を反映した文字列で、これは範囲ウィジェットの最大許容値を定義します。 +- {{domxref("ElementInternals.ariaValueMin")}} + - : [`aria-valueMin`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-valuemin) 属性を反映した文字列で、これは範囲ウィジェットの最小許容値を定義します。 +- {{domxref("ElementInternals.ariaValueNow")}} + - : [`aria-valueNow`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-valuenow) 属性を反映した文字列で、範囲ウィジェットの現在値を定義します。 +- {{domxref("ElementInternals.ariaValueText")}} + - : [`aria-valuetext`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-valuetext) 属性を反映した文字列で、 これは、範囲ウィジェットの aria-valuenow の代替となる人間が読めるテキストを定義します。 + +## インスタンスメソッド + +- {{domxref("ElementInternals.setFormValue()")}} + - : 要素の送信値と状態を設定し、これらをユーザーエージェントに伝えます。 +- {{domxref("ElementInternals.setValidity()")}} + - : 要素の有効性を設定します。 +- {{domxref("ElementInternals.checkValidity()")}} + - : 要素が、[制約検証](/ja/docs/Web/HTML/Constraint_validation)ルールを満たしているかどうかをチェックします。 +- {{domxref("ElementInternals.reportValidity()")}} + - : 要素が[制約検証](/ja/docs/Web/HTML/Constraint_validation)ルールを満たしているかどうかをチェックし、ユーザエージェントに検証メッセージを送信します。 + +## 例 + +次の例は、カスタムフォーム関連要素を {{domxref("HTMLElement.attachInternals")}} で作成する方法を示しています。 + +```js +class CustomCheckbox extends HTMLElement { + static formAssociated = true; + + constructor() { + super(); + this.internals_ = this.attachInternals(); + } + + // … +} + +window.customElements.define("custom-checkbox", CustomCheckbox); + +let element = document.createElement("custom-checkbox"); +let form = document.createElement("form"); + +// フォームに要素を追加して関連付ける +form.appendChild(element); + +console.log(element.internals_.form); +// expected output:
+``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [More capable form controls](https://web.dev/articles/more-capable-form-controls) +- [Creating custom form controls with ElementInternals](https://css-tricks.com/creating-custom-form-controls-with-elementinternals/) +- [ElementInternals polyfill](https://www.npmjs.com/package/element-internals-polyfill) diff --git a/files/ja/web/api/elementinternals/labels/index.md b/files/ja/web/api/elementinternals/labels/index.md new file mode 100644 index 00000000000000..130b22b6a6cb39 --- /dev/null +++ b/files/ja/web/api/elementinternals/labels/index.md @@ -0,0 +1,40 @@ +--- +title: "ElementInternals: labels プロパティ" +short-title: labels +slug: Web/API/ElementInternals/labels +l10n: + sourceCommit: 86215eff9beccf2e069be9109347ad830cc5e9c4 +--- + +{{APIRef("DOM")}} + +**`labels`** は {{domxref("ElementInternals")}} インターフェイスのプロパティで、要素に関連付けられたラベルを返します。 + +## 値 + +この要素に関連付けられたすべてのラベル要素の入った {{domxref("NodeList")}} です。 + +## 例 + +次の例は、カスタムチェックボックスコンポーネントに {{HTMLElement("label")}} 要素をリンクしたものです。 +`labels` の値をコンソールに出力すると、このラベルを表す1つのエントリを持つ {{domxref("NodeList")}} が返されます。 + +```html +
+ + +
+``` + +```js +let element = document.getElementById("custom-checkbox"); +console.log(element.internals_.label); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/elementinternals/reportvalidity/index.md b/files/ja/web/api/elementinternals/reportvalidity/index.md new file mode 100644 index 00000000000000..d43fe1417a28c3 --- /dev/null +++ b/files/ja/web/api/elementinternals/reportvalidity/index.md @@ -0,0 +1,56 @@ +--- +title: "ElementInternals: reportValidity() メソッド" +short-title: reportValidity() +slug: Web/API/ElementInternals/reportValidity +l10n: + sourceCommit: 86215eff9beccf2e069be9109347ad830cc5e9c4 +--- + +{{APIRef("DOM")}} + +**`reportValidity()`** は {{domxref("ElementInternals")}} インターフェイスのメソッドで、適用された[制約検証](/ja/docs/Web/HTML/Constraint_validation)ルールをこの要素が満たしているかどうかをチェックします。 + +`reportValidity` が `false` を返した場合、キャンセル可能な [invalid イベント](/ja/docs/Web/API/HTMLInputElement/invalid_event)が要素で発生します。 + +このメソッドは {{domxref("ElementInternals.checkValidity()")}} と同様の振る舞いをしますが、 {{domxref("ElementInternals.validationMessage")}} の値をユーザーエージェントに送信して表示させます。 + +## 構文 + +```js-nolint +reportValidity() +``` + +### 引数 + +なし。 + +### 返値 + +論理値で、要素がすべての検証される制約に合格していれば `true` を返します。 + +### 例外 + +- `NotSupportedError` {{domxref("DOMException")}} + - : 要素の `formAssociated` プロパティが `true` に設定されていない場合に発生します。 + +## 例 + +以下の例では、 {{domxref("ElementInternals.setValidity()")}} を使用して、要素が検証ルールを満たしていないことを示します。 `reportValidity()` を呼び出すと `false` が返され、 "メッセージ" という値がユーザーエージェントに送られ、表示されます。 + +再度 `setValidity` を呼び出し、今度はすべてのルールが false になっていることを示すと、`reportValidity()` は `true` を返します。 + +```js +let element = document.getElementById("join-checkbox"); +element.internals_.setValidity({ valueMissing: true }, "メッセージ"); +console.log(element.internals_.reportValidity()); // false +element.internals_.setValidity({}); +console.log(element.internals_.reportValidity()); // true +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/elementinternals/setformvalue/index.md b/files/ja/web/api/elementinternals/setformvalue/index.md new file mode 100644 index 00000000000000..873234711c669a --- /dev/null +++ b/files/ja/web/api/elementinternals/setformvalue/index.md @@ -0,0 +1,56 @@ +--- +title: "ElementInternals: setFormValue() メソッド" +short-title: setFormValue() +slug: Web/API/ElementInternals/setFormValue +l10n: + sourceCommit: 86215eff9beccf2e069be9109347ad830cc5e9c4 +--- + +{{APIRef("DOM")}} + +**`setFormValue()`** は {{domxref("ElementInternals")}} インターフェイスのメソッドで、このメソッドは、要素の送信値と状態を設定し、これらをユーザーエージェントに伝えます。 + +## 構文 + +```js-nolint +setFormValue(value) +setFormValue(value, state) +``` + +### 引数 + +- `value` + - : サーバに送信する値として、{{domxref("File")}}、文字列、{{domxref("FormData")}} のいずれかを指定します。 +- `state` {{optional_inline}} + - : {{domxref("File")}}、文字列、{{domxref("FormData")}} のいずれかで、ユーザーの入力を表します。 + これにより、アプリケーションは必要に応じて、ユーザーが送信した情報を、ユーザーが入力した形式で再表示することができます。 + +> **メモ:** 一般的に、 `state` はユーザがー指定した情報を渡すために、 `value` はサニタイズ後、サーバーに送信するのに適した情報を渡すために使用されます。 +> たとえば、カスタム要素で日付の入力を求められた場合、ユーザーは「3/15/2019」と入力するかもしれません。 +> これは `state` です。 +> サーバーは `2019-03-15` という日付書式を期待しているので、この書式の日付が `value` として渡されます。 + +### 返値 + +undefined です。 + +### 例外 + +- `NotSupportedError` {{domxref("DOMException")}} + - : 要素の `formAssociated` プロパティが `true` に設定されていない場合に発生します。 + +## 例 + +次の例では、チェックボックスのカスタム要素で、サーバーに送信する値として `on` を、状態として `checked` を設定しています。 + +```js +this.internals_.setFormValue("on", "checked"); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/elementinternals/setvalidity/index.md b/files/ja/web/api/elementinternals/setvalidity/index.md new file mode 100644 index 00000000000000..807f85cc92de7a --- /dev/null +++ b/files/ja/web/api/elementinternals/setvalidity/index.md @@ -0,0 +1,88 @@ +--- +title: "ElementInternals: setValidity() メソッド" +short-title: setValidity() +slug: Web/API/ElementInternals/setValidity +l10n: + sourceCommit: 86215eff9beccf2e069be9109347ad830cc5e9c4 +--- + +{{APIRef("DOM")}} + +**`setValidity()`** は {{domxref("ElementInternals")}} インターフェイスのメソッドで、この要素の妥当性を設定します。 + +## 構文 + +```js-nolint +setValidity(flags) +setValidity(flags, message) +setValidity(flags, message, anchor) +``` + +### 引数 + +- `flags` {{Optional_Inline}} + + - : 要素の有効状態を示す、 1 つ以上のフラグを含む辞書オブジェクトです。 + + - `valueMissing` + - : 論理値で、要素に [`required`](/ja/docs/Web/HTML/Element/input#required) 属性があって値がない場合は `true` となり、そうでない場合は `false` となります。もし `true` なら、その要素は CSS の {{cssxref(":invalid")}} の擬似クラスに一致します。 + - `typeMismatch` + - : 論理値で、値が必要とされる構文でない場合（[`type`](/ja/docs/Web/HTML/Element/input#type) が `email` または `url` の場合）は `true` となり、構文が正しい場合は `false` となります。 `true` の場合、その要素は CSS の {{cssxref(":invalid")}} の擬似クラスに一致します。 + - `patternMismatch` + - : 論理値で、指定された [`pattern`](/ja/docs/Web/HTML/Element/input#pattern) に一致しない場合は `true` となり、一致する場合は `false` となります。 `true` の場合、その要素は CSS の {{cssxref(":invalid")}} の擬似クラスに一致します。 + - `tooLong` + - : 論理値で、値が {{domxref("HTMLInputElement")}} または {{domxref("HTMLTextAreaElement")}} オブジェクトで指定された `maxlength` を超える場合は `true` となり、最大の長さ以下の場合は `false` となります。 `true` の場合、その要素は CSS の {{cssxref(":invalid")}} および {{cssxref(":out-of-range")}} 擬似クラスに一致します。 + - `tooShort` + - : 論理値で、値が {{domxref("HTMLInputElement")}} または {{domxref("HTMLTextAreaElement")}} オブジェクトで指定された `minlength` に満たない場合は `true` となり、最小の長さ以上の場合は `false` となります。 `true` の場合、その要素は CSS の {{cssxref(":invalid")}} および {{cssxref(":out-of-range")}} 擬似クラスに一致します。 + - `rangeUnderflow` + - : 論理値で、値が [`min`](/ja/docs/Web/HTML/Element/input#min) 属性で指定された最小値より小さい場合は `true` となり、最小値以上の場合は `false` となります。 `true` の場合、要素は CSS の {{cssxref(":invalid")}} および {{cssxref(":out-of-range")}} 擬似クラスに一致します。 + - `rangeOverflow` + - : 論理値で、値が [`max`](/ja/docs/Web/HTML/Element/input#max) 属性で指定された最大値より大きい場合は `true` となり、最大値以下であれば `false` となります。 `true` の場合、要素は CSS の {{cssxref(":invalid")}} および {{cssxref(":out-of-range")}} 擬似クラスに一致します。 + - `stepMismatch` + - : 論理値で、値が [`step`](/ja/docs/Web/HTML/Element/input#step) 属性によって決定されるルールに適合しない（つまり、ステップ値で均等に割り切れない）場合は `true` となり、ステップのルールに適合する場合は `false` となります。 `true` の場合、要素は CSS の {{cssxref(":invalid")}} および {{cssxref(":out-of-range")}} 擬似クラスに一致します。 + - `badInput` + - : 論理値で、ブラウザーが変換できない入力をユーザーが入力した場合に `true` となります。 + - `customError` + - : 論理値で、この要素の {{domxref('HTMLObjectElement.setCustomValidity', 'setCustomValidity()')}} メソッドを呼び出すことで、要素のカスタム有効性メッセージが空でない文字列に設定されたかどうかを示します。 + + > **メモ:** すべてのフラグを `false` に設定し、この要素がすべての制約の検証に合格したことを示すには、空のオブジェクト `{}` を渡してください。この場合、 `message` も渡す必要はありません。 + +- `message` {{Optional_Inline}} + - : `flags` が `true` の場合に設定されるメッセージを含む文字列。すべての `flags` が `false` の場合のみ、この引数はオプションとなります。 +- `anchor` {{Optional_Inline}} + - : このフォーム送信に関する問題を報告するためにユーザーエージェントが使用する {{domxref("HTMLElement")}} です。 + +### 返値 + +なし ({{jsxref("undefined")}})。 + +### 例外 + +- `NotSupportedError` {{domxref("DOMException")}} + - : 要素の `formAssociated` プロパティが `true` に設定されていない場合に発生します。 +- {{jsxref("TypeError")}} + - : 1 つ以上の `flags` が `true` の場合に発生します。 +- `NotFoundError` {{domxref("DOMException")}} + - : `anchor` が与えられているが、そのアンカーが要素のシャドウを含む子孫でない場合に発生します。 + +## 例 + +次の例では、 `setValidity` を空の `flags` 引数を指定して呼び出して、この要素が制約検証ルールを満たしていることを示します。 + +```js +this.internals_.setValidity({}); +``` + +次の例では、 `valueMissing` フラグを `true` に設定して `setValidity` を呼び出しています。その際、 `message` 引数にメッセージを渡す必要があります。 + +```js +this.internals_.setValidity({ valueMissing: true }, "my message"); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}}