formのサブミット前にvalidationとかする方法

HTMLのformをサブミットする際に、クライアント側で必須項目の入力チェックとかつまりvalidationをしたいんだけど勝手にサブミットされてしまい困ってる、という人の参考になれば。

ボタンではなくjavascriptのsubmit()でサブミットさせる

まずボタンのtypeをsubmitではなくbuttonにします。次にjavascriptの関数を用意します。validation合格だった場合だけformエレメントのsubmit()を行なうように実装しましょう。あとはボタンのonclick属性で先の関数を指定すればできあがり。

実際のコードはこちら。