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

Showing content from https://developer.cdn.mozilla.net/ja/docs/Web/API/HTMLButtonElement/reportValidity below:

HTMLButtonElement: reportValidity() メソッド - Web API

Baseline Widely available

reportValidity() は HTMLButtonElement インターフェイスのメソッドで、 checkValidity() メソッドと同じ検証のチェック手順を実行します。値が無効であった場合、このメソッドはその要素に invalid イベントを発行し、（そのイベントがキャンセルされなければ）ユーザーに問題を報告します。

なし。

要素を検証して問題がなければ true を返し、それ以外の場合は false を返します。

この突飛な例は、ボタンを不正なものにする方法を示しています。

いくつかのボタンだけを設置したフォームを作成します。

<form action="#" id="form" method="post">
  <p>
    <input type="submit" value="送信" />
    <button id="example" type="submit" value="fixed">このボタン</button>
  </p>
  <p>
    <button type="button" id="report">reportValidity()</button>
  </p>
</form>

<p id="log"></p>

CSS を少し追加し、ボタンに :valid および :invalid スタイルを設定します。

input[type="submit"],
button {
  background-color: #33a;
  border: none;
  font-size: 1.3rem;
  padding: 5px 10px;
  color: white;
}
button:invalid {
  background-color: #a33;
}
button:valid {
  background-color: #3a3;
}

この例のボタンに値、内容、検証メッセージの切り替え機能を設置します。

const reportButton = document.querySelector("#report");
const exampleButton = document.querySelector("#example");
const output = document.querySelector("#log");

reportButton.addEventListener("click", () => {
  const reportVal = exampleButton.reportValidity();
  output.innerHTML = `reportValidity の返値: ${reportVal} <br/> 独自のエラー: ${exampleButton.validationMessage}`;
});

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

exampleButton.addEventListener("click", (e) => {
  e.preventDefault();
  if (exampleButton.value == "error") {
    breakOrFixButton("fixed");
  } else {
    breakOrFixButton("error");
  }
  output.innerHTML = `検証メッセージ: ${exampleButton.validationMessage} <br/> 独自のエラー: ${exampleButton.validationMessage}`;
});

const breakOrFixButton = () => {
  const state = toggleButton();
  if (state == "error") {
    exampleButton.setCustomValidity("これは独自のエラーメッセージです。");
  } else {
    exampleButton.setCustomValidity("");
  }
};

const toggleButton = () => {
  if (exampleButton.value == "error") {
    exampleButton.value = "fixed";
    exampleButton.innerHTML = "エラーなし";
  } else {
    exampleButton.value = "error";
    exampleButton.innerHTML = "独自のエラー";
  }
  return exampleButton.value;
};

ボタンは既定で有効です。［このボタン］を有効にすると、値やコンテンツを変更したり、独自のエラーメッセージを追加したりすることができます。［reportValidity()ï¼½ ボタンを有効にすると、ボタンの有効性が確認され、独自のエラーメッセージがユーザーに報告され、メッセージによりボタンが制約検証を通らない場合は invalid イベントが発生します。

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