Form validationと暗黙のsubmitの調査

HTML5には暗黙のsubmitという機能があります。
Implicit submissionなどでググると詳細は出てきますが、特定条件下ではsubmit buttonがなくてもsubmitされるようになっています。

またForm validationとは、フォーム送信前にテキストボックス内の入力内容が適切か、ブラウザ側でチェックをし、不適切であればポップアップ等で入力修正を促しフォーム送信をキャンセルする機能です。

検証

これらの挙動が、どういう条件で発動するのか・しないのかが分からなかったのでいくつかのパターンを用意して見ました。

テキストボックスは全てrequierdとし、入力せずにフォーム送信しようとするとValidationに引っかかるようにしています。
その上で、ボタンの有無、ボタンの種類、ボタンの位置を変えることで、それぞれのフォームの挙動を確認します。
パターンは以下の表の通りです。

以下の画面で、テキストボックスを選択し何も入力せずEnterキーを押下してみてください。
それぞれのフォームで挙動が異なることが見て取れると思います。

See the Pen
Implicit Submission Test by tukapiyo (tukapiyo)
on CodePen.

結果

想定される結果は、以下の通りです。

この結果から以下の事が分かります。

テキストボックス（input）が2つ以上存在し、buttonが1つも存在しない場合は暗黙のsubmitが実行されません。
→form2

暗黙のsubmitは、buttonのtypeが指定されないまたはtype="submit"のどちらの場合でも実行されます。
→form3, form4

暗黙のsubmitは、form内の最初のbuttonが（他にtype="submit"があったとしても）実行されます。
→form5

暗黙のsubmitは、type="button"のbuttonは実行しません。
→form6

まとめ

暗黙のsubmitを効果的にかつ明確に実行するためには、button type="submit"なボタンを1つだけ用意し、それ以外のbuttonには必ずtype="button"を指定するようにしましょう。