入力フォームでEnterキーを押下した際にsubmitされてしまう現象の解決

入力フォームでinputに打ち込んだ後にEnterキーを押すと、入力チェックなどバリデーションをすっ飛ばしてsubmitされてしまうので、
それを解決するために行った作業の備忘録

Enterキーでsubmitされてしまう理由

暗黙のsubmitという機能があるためenterキーでsubmitされてしまうらしい。

参照先

要約すると次の通りになるらしい

・フィールドでenterキーを押下した際、デフォルトのsubmitボタンを押した際と同じ動きをする。
　※デフォルトのsubmitボタンとはページ内に最初に設置されたsubmitボタンのことである。

・複数submitボタンがある場合もenterキー押下で、デフォルトのボタンを押した際の動きをする。

・submitボタンが無い場合、フィールドがページに一つなら暗黙的サブミットを行う。フィールドが複数あるページの場合暗黙のサブミットは行われない。

・上記の対象になるフィールドは、Text, Search, URL, Telephone, E-mail, Password, Date, Time, Numberのタイプのフィールドである。

暗黙のsubmitを阻止するには

先述の暗黙のsubmitがされない条件を作りだす必要がある。

・デフォルトのsubmitボタンを非活性にする。
・submitボタンがない場合は暗黙のsubmitを阻止する項目が1つより多くする。(text, Search, URL, Telephone, E-mail, Password...等)
・submitボタンではなくjsやonclickイベント等でsubmitを行う。

実際に自分が作業していたページで、暗黙のsubmitをしないように条件を整えてみました。

HTML
 <form action="" method="post" class="" id="form">
          <tbody>
            <tr>
              <th>a<span class="required">必須</span></th>
              <td>
                <div class="input-box">
                  <input type="text" class="" name="" value="" maxlength="30" placeholder="">
                  <p class="">未入力です</p>
                </div>
              </td>
            </tr>
            <tr>
              <th>b<span class="required">必須</span></th>
              <td>
                <div class="input-box">
                  <input type="text" class="r" name="" value="" maxlength="30" placeholder="">
                  <p class="">未入力です</p>
                </div>
              </td>
            </tr>
            <tr>
              <th>c<span class="required">必須</span></th>
              <td>
                <div class="input-box">
                  <input type="tel" class="r" name="" value="}" maxlength="10" placeholder="">
                  <p class="">未入力です</p>
                </div>
              </td>
            </tr>
            <tr>
              <th>d<span class="required">必須</span></th>
              <td>
                <div class="input-box">
                  <input type="text" class="" name="" value="" maxlength="30" placeholder="">
                  <p class="">未入力です</p>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <div class="submit hover">
            <button name="button" type="submit" class="btn-disable" id="button" data-status="false">内容確認へ進む</button>
            <button name="button" type="submit" class="btn-confirm" id="button" value="submit">内容確認へ進む</button>
　　　　</div>
</form>

1 デフォルトのsubmitボタンの非活性化

修正をしたいページはボタン送信ボタン自体は入力チェックによってボタンを出し分ける作りになっている。
最初に表れるsubmitボタンでjsの入力チェックを行う仕組みになっていて、disabeledにしてしまうとjsによる入力チェックが発火しなくなるので、その方法は使えない。

2 暗黙のsubmitを阻止する項目を1つ以上作る

これはsubmitボタンがない場合の対処方なので、今回の場合には使えませんでした。

3 typeをsubmit から buttonに変更しjsでsubmit処理を実行

html
        <div class="submit hover">
            <button name="button" type="button" class="btn-disable" id="button" data-status="false">内容確認へ進む</button>
            <button name="button" type="button" class="btn-confirm" id="button" value="submit">内容確認へ進む</button>
　　　　</div>

jQuery
    $(".btn-confirm").click(function(){
      $('form').submit();
 }

これで暗黙のsubmitが行われなくなりました。

まとめ

場合によっては暗黙のsubmitがあったほうが便利な場合はありますが、個人情報を複数入力してもらうようなフォームだと入力チェックを行っているのページがほとんどと思うので、暗黙のsubmitの対策をしておかないと不都合な場合が多いと思います。

対策としては今回3つ紹介しましたが、

送信ボタンや入力フィールドの挙動や個数に特に制限がない場合は1か2の方法を
jsなどで入力チェックや送信処理、APIの呼び出し等がある場合は3の方法

など、それぞれページの構成に適している対策手段があるので、状況に応じて使い分けられるようにできるといいと思います。