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(""); } };