HTMLInputElement: reportValidity() メソッド

reportValidity()

<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="report">reportValidity()</button>
  </p>
  <p id="log"></p>
</form>

const output = document.querySelector("#log");
const reportButton = document.querySelector("#report");
const ageInput = document.querySelector("#age");

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

reportButton.addEventListener("click", () => {
  const reportVal = ageInput.reportValidity();
  output.innerHTML = `"reportValidity()" の返値: ${reportVal}`;
  if (!reportVal) {
    output.innerHTML += `<br />検証メッセージ: "${ageInput.validationMessage}"`;
  }
});

<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="report">reportValidity()</button>

<button type="button" id="fix">問題を修正</button>

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

const output = document.querySelector("#log");
const reportButton = document.querySelector("#report");
const ageInput = document.querySelector("#age");
const fixButton = document.querySelector("#fix");
let enableValidation = false;

fixButton.addEventListener("click", (e) => {
  enableValidation = true;
  fixButton.innerHTML = "エラーを修正しました";
  fixButton.disabled = true;
});

reportButton.addEventListener("click", () => {
  validateAge();
  const reportVal = ageInput.reportValidity();
  output.innerHTML = `"reportValidity()" の返値: ${reportVal}`;
  if (!reportVal) {
    output.innerHTML += `<br />検証メッセージ: "${ageInput.validationMessage}"`;
  }
});

const validateAge = () => {
  const validityState_object = ageInput.validity;
  if (validityState_object.valueMissing) {
    ageInput.setCustomValidity("年齢を入力してください（必須）");
  } else if (ageInput.rangeUnderflow) {
    ageInput.setCustomValidity("値が小さすぎます");
  } else if (ageInput.rangeOverflow) {
    ageInput.setCustomValidity("値が大きすぎます");
  } else if (enableValidation) {
    // 有効でかつ enableValidation が true に設定されている場合は true
    ageInput.setCustomValidity("");
  }
};