Form validationと暗黙のsubmitの調査

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

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

検証

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

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

パターン テキストボックスの数 ボタン1の条件 ボタン2の条件
form1 1 存在しない 存在しない
form2 2 存在しない 存在しない
form3 2 typeを指定していないボタン 存在しない
form4 1 type="submit"のボタン 存在しない
form5 1 typeを指定しないボタン
clickイベントでアラート表示
type="submit"のボタン
form6 1 type="button"のボタン
clickイベントでアラート表示
type="submit"のボタン

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

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

結果

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

パターン 想定される結果
form1 Form Validationが働き、エラーが表示されsubmitがキャンセルされる
form2 Form Validationが働かないし、そもそもsubmitされない
form3 Form Validationが働き、エラーが表示されsubmitがキャンセルされる
form4 Form Validationが働き、エラーが表示されsubmitがキャンセルされる
form5 アラートが表示される。Form Validationが働き、エラーが表示されsubmitがキャンセルされる
※Firefoxではエラーが表示されない
form6 アラートは表示されない。Form Validationが働き、エラーが表示されsubmitがキャンセルされる

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

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

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

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

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

まとめ

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

おすすめ

コメントを残す

Amazon プライム対象