Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from http://developer.mozilla.org/ja/docs/Web/API/HTMLInputElement/checkValidity below:

HTMLInputElement: checkValidity() メソッド - Web API

Baseline Widely available

checkValidity() は HTMLInputElement インターフェイスのメソッドで、その要素が適用された制約検証ルールを満たしているかどうかを示す論理値を返します。false の場合は、メソッドは要素上で invalid イベントも発行します。checkValidity() には既定でブラウザーの動作が設定されていないため、この invalid イベントをキャンセルしても効果はありません。

メモ: HTML の <input> 要素で、validationMessage が null 以外の値を持つものは不正なものと見なされ、CSS の :invalid 擬似クラスに一致し、checkValidity() が false を返すようになります。 HTMLInputElement.setCustomValidity() メソッドを使用して、HTMLInputElement.validationMessage を空文字列に設定すると、validity 状態が妥当となります。

なし。

要素の値に妥当性の問題がなければ true を返し、そうでなければ false を返します。

必須の数値フィールドと、フォームのチェックボタンと送信ボタンの 2 つのボタンを設置したフォームを設置します。

<form action="#" method="post">
  <p>
    <label for="age">年齢 (21 ～ 65) </label>
    <input type="number" name="age" required id="age" min="21" max="65" />
  </p>
  <p>
    <button type="submit">送信</button>
    <button type="button" id="check">checkValidity()</button>
  </p>
  <p id="log"></p>
</form>

const output = document.querySelector("#log");
const checkButton = document.querySelector("#check");
const ageInput = document.querySelector("#age");

ageInput.addEventListener("invalid", () => {
  console.log("invalid イベントが発行されました。");
});

checkButton.addEventListener("click", () => {
  const checkVal = ageInput.checkValidity();
  output.innerHTML = `checkValidity が ${checkVal} を返しました。`;
});

false の場合、値が未入力、21 未満、65 超、または無効な場合、invalid イベントがコンソールに記録されます。ユーザーにエラーを報告するには、代わりに HTMLInputElement.reportValidity() を使用してください。

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4