ウェブサイト構築中にちょっとはまったのでメモ。

Formタグの中にSubmitを行うボタンをおけない場合、 input="submit" のボタンをFormタグ内にhidden状態で記載し、Formの外のボタンを置きたい場所にラベルタグとfor属性を利用してボタンを設けるという方法がありますが、これだとEnter押下時にSubmitが走ってしまうという問題があったため、 HTMLFormElement.submit()を利用して回避。

ただ、これはMDNにも記載されている通りsubmitイベントが発生せず、制約検証も行われない問題が。

HTMLFormElement.reportValidity()

HTML5.1から HTMLFormElement.reportValidity() という制約検証を行うための機能が追加されてた模様。知らなかった・・・。

これを HTMLFormElement.submit() 実行前に呼び出して結果が true だった場合にだけsubmit処理させるようにしてやればOK。

reportValidity() はエラーが存在する場合、required などの制約検証に対するメッセージが該当のフォーム要素に表示されるそう。

似たようなもので checkValidity() があり、こちらは制約検証結果をtrueかfalseかで返すだけ。エラーメッセージは表示されないので、独自にメッセージを調整したい場合などには有用。