HTML5のバリデーションをJavascriptから実行する

HTML5のバリデーションは、inputタグやselectタグなど入力項目にrequired属性やmaxlength属性などが存在する場合に自動で実行され、またsubmitボタンによりフォームを送信しようとした場合にも自動でフォームの送信が中断されるが、Javascript経由でフォームのsubmit()メソッドを実行した場合は無視されフォームが送信されてしまう。

これを防ぐためにJavascriptからHTML5のバリデーションを実行するにはreportValidity()メソッドを呼び出せば良い。


var form = $("#form");

// バリデーションを実行
if(form[0].reportValidity()){
    // バリデーションに成功した場合
    form.submit();
}else{
    // バリデーションエラーが存在する場合
    alert("error");
}

参考(https://teratail.com/questions/164016)