2024/09/11 時点の英語版に基づき新規翻訳

files/ja/web/api/htmlbuttonelement/checkvalidity/index.md

@@ -0,0 +1,54 @@
+---
+title: "HTMLButtonElement: checkValidity() メソッド"
+short-title: checkValidity()
+slug: Web/API/HTMLButtonElement/checkValidity
+l10n:
+  sourceCommit: 2b29051262aa05ce9a630d0dd2d6958f493abe19
+---
+
+{{APIRef("HTML DOM")}}
+
+**`checkValidity()`** は {{domxref("HTMLButtonElement")}} インターフェイスのメソッドで、その要素が適用された[制約検証](/ja/docs/Web/HTML/Constraint_validation)ルールを満たしているかどうかを示す論理値を返します。false の場合は、メソッドは要素上で {{domxref("HTMLButtonElement/invalid_event", "invalid")}} イベントも発行します。`checkValidity()` には既定でブラウザーの動作が設定されていないため、この `invalid` イベントをキャンセルしても効果はありません。{{HTMLElement("button")}} 要素の {{domxref("HTMLButtonElement/type", "type")}} が `"button"` または `"reset"` である場合、そのボタンが[制約検証](/ja/docs/Web/HTML/Constraint_validation)になることはないので、常に true を返します。
+
+> [!NOTE]
+> HTML の {{htmlelement("button")}} 要素で、{{domxref("HTMLButtonElement.validationMessage", "validationMessage")}} が null 以外の値を持つものは不正なものと見なされ、CSS の {{cssxref(":invalid")}} 擬似クラスに一致し、`checkValidity()` が false を返すようになります。 {{domxref("HTMLButtonElement.setCustomValidity()")}} メソッドを使用して、{{domxref("HTMLButtonElement.validationMessage")}} を空文字列に設定すると、{{domxref("HTMLButtonElement.validity", "validity")}} 状態が妥当となります。
+
+## 構文
+
+```js-nolint
+checkValidity()
+```
+
+### 引数
+
+なし。
+
+### 返値
+
+要素の値に妥当性の問題がなければ `true` を返し、そうでなければ `false` を返します。
+
+## 例
+
+次の例では、`checkValidity()` を呼び出すと、`true` または `false` のいずれかを返します。
+
+```js
+const element = document.getElementById("myButton");
+console.log(element.checkValidity());
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("HTMLButtonElement.reportValidity()")}}
+- {{HTMLElement("button")}}
+- {{HTMLElement("form")}}
+- [学習: クライアント側フォーム検証](/ja/docs/Learn/Forms/Form_validation)
+- [ガイド: 制約検証](/ja/docs/Web/HTML/Constraint_validation)
+- CSS の {{cssxref(":valid")}} および {{cssxref(":invalid")}} 擬似クラス

files/ja/web/api/htmlbuttonelement/validity/index.md

@@ -0,0 +1,44 @@
+---
+title: "HTMLButtonElement: validity プロパティ"
+short-title: validity
+slug: Web/API/HTMLButtonElement/validity
+l10n:
+  sourceCommit: 2b29051262aa05ce9a630d0dd2d6958f493abe19
+---
+
+{{APIRef("HTML DOM")}}
+
+**`validity`** は {{domxref("HTMLButtonElement")}} インターフェイスの読み取り専用プロパティで、この要素の有効状態を表す {{domxref("ValidityState")}} オブジェクトを返します。
+
+## 値
+
+{{domxref("ValidityState")}} オブジェクトです。
+
+## 例
+
+次の例は、 `<button>` に {{domxref("ValidityState/customError", "customError")}} が設定されている場合、不正な状態にあることを示しています。この状態では、`validityState` の `validity` プロパティは `false` ですが、{{domxref("HTMLButtonElement/checkValidity", "checkValidity()")}} は、ボタンの {{domxref("HTMLButtonElement/type", "type")}} が `"submit"` でない場合、[制約検証](/ja/docs/Web/HTML/Constraint_validation)の対象ではないため、`true` を返します。
+
+```js
+const button = document.getElementById("myButton");
+button.setCustomValidity("This button is invalid.");
+const validityState = button.validity;
+console.log(validityState.valid); // false
+console.log(validityState.customError); // true
+console.log(button.checkValidity()); // ボタンの種類が "submit" の場合は false、そうでなければ true
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("HTMLButtonElement.checkValidity()")}}
+- {{HTMLElement("button")}}
+- {{HTMLElement("form")}}
+- [学習: クライアント側フォーム検証](/ja/docs/Learn/Forms/Form_validation)
+- [ガイド: 制約検証](/ja/docs/Web/HTML/Constraint_validation)