HTMLButtonElement: reportValidity() メソッド

reportValidity() 

<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> 

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; };