必須入力のブラウザ標準バリデーションを使うには、入力に required を付ける。JSで送信前に妥当性を確認するには、form.( A )() を呼ぶ。無効なときに送信を止めるには、if (!form.( B )()) event.preventDefault(); のように書く。
解答
A: checkValidity
B: reportValidity もしくは checkValidity(いずれも判定に使用可)
解説
checkValidity() は真偽のみ、reportValidity() はエラーメッセージ表示も行います。送信処理では妥当性が false なら preventDefault() で送信を止めます。
使用例(サンプルコード)
[ html ]
<form id="f">
<input name="email" type="email" required>
<button>送信</button>
</form>
<script>
const form = document.getElementById('f');
form.addEventListener('submit', (event) => {
if (!form.checkValidity()) {
event.preventDefault(); // 無効なら送信しない
form.reportValidity(); // エラー表示
}
});
</script>