HTMLInputElement: phương thức reportValidity()

reportValidity()

<form action="#" method="post">
  <p>
    <label for="age">Tuổi của bạn (21 đến 65) </label>
    <input type="number" name="age" required id="age" min="21" max="65" />
  </p>
  <p>
    <button type="submit">Gửi</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("Sự kiện Invalid đã kích hoạt.");
});

reportButton.addEventListener("click", () => {
  const reportVal = ageInput.reportValidity();
  output.innerHTML = `"reportValidity()" trả về: ${reportVal}`;
  if (!reportVal) {
    output.innerHTML += `<br />Thông báo xác thực: "${ageInput.validationMessage}"`;
  }
});

<form action="#" method="post">
  <p>
    <label for="age">Tuổi của bạn (21 đến 65) </label>
    <input type="number" name="age" required id="age" min="21" max="65" />
  </p>
  <p>
    <button type="submit">Gửi</button>
    <button type="button" id="report">reportValidity()</button>
    <button type="button" id="fix">Sửa vấn đề</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 = "Đã sửa lỗi";
  fixButton.disabled = true;
});

reportButton.addEventListener("click", () => {
  validateAge();
  const reportVal = ageInput.reportValidity();
  output.innerHTML = `"reportValidity()" trả về: ${reportVal}`;
  if (!reportVal) {
    output.innerHTML += `<br />Thông báo xác thực: "${ageInput.validationMessage}"`;
  }
});

function validateAge() {
  const validityState = ageInput.validity;
  if (validityState.valueMissing) {
    ageInput.setCustomValidity("Vui lòng đặt tuổi (bắt buộc)");
  } else if (validityState.rangeUnderflow) {
    ageInput.setCustomValidity("Giá trị của bạn quá thấp");
  } else if (validityState.rangeOverflow) {
    ageInput.setCustomValidity("Giá trị của bạn quá cao");
  } else if (enableValidation) {
    // đặt thành chuỗi rỗng nếu hợp lệ VÀ enableValidation đã được đặt thành true
    ageInput.setCustomValidity("");
  }
}