はじめに

Enterキーを押すとformが送信されるのを防ぐ。

この実装方法自体は調べればすぐに見つかったのだが、送信される場合とされない場合があったので疑問を感じた。

そこで調べてみると、from、input、buttunといったHTML要素の仕様について、色々と勉強になったので備忘録を書いておく。

やりたいこと

formで＜input type=”text”＞にフォーカスしている時に、Enterキーを押すと送信されてしまう場合がある。
意図しない送信を防ぐ為、送信ボタンをクリックしたときだけsubmitするようにする。

実装方法

formタグにonsubmit="return false;"を追加する

以下のような感じに。

<form onsubmit="return false;">

送信ボタンをtype="button"にする

送信ボタンをtype="button"に変更する。
onclick="submit();でボタンを押したときだけsubmitさせるようにする。
（input要素のsubmit型は、ボタンとして描画される。）

<input type="button" value="送信" onClick="submit();">

フロント側のバリデーションを効かせたい

ただし上記の実装では、inputに指定しているrequired属性などフロント側のバリデーションは無視して送信されてしまう。
フロント側のバリデーションを効かせたい場合は、以下のようにJavaScriptで制御する。

<script>
	function submitAfterValidate() {
        if (!form.reportValidity()) {
            return false;
        } else {
            form.submit();
        }
    }
</script>

// 中略

<input type="button" value="送信" onClick="submitAfterValidate();">

学んだこと備忘録

ここから先は、HTMLのform関連で学んだことの備忘録。

formのaction属性

action属性は、どこにデータを送信するかを定義する。
値は相対または絶対URL。

// 絶対URLの場合
<form action="https://example.com">

// 相対URLの場合（同一オリジン上の別のURLに送信する）
<form action="/example">

// 何も指定しなければ、フォームが表示されているページ自身へ送信する
<form>

入力欄でのEnterキー押下で、submitされる場合とされない場合

form内にsubmitボタンがある場合は、Enterキー押下によりsubmitされる。
※submitボタン：<input type="submit">もしくは<button type="submit">を指す。

<form>
    <input type="text">
    <input type="text">
    <input type="submit" value="送信">
</form>

form内にsubmitボタンが無く、<input type="text">が1つだけであれば、Enterキー押下でsubmitされる。

<form>
    <input type="text">
    <input type="button" value="送信" onClick="submit();">
</form>

form内にsubmitボタンが無くても、<input type="text">が2つ以上あれば、Enterキー押下でsubmitされない。

<form>
    <input type="text">
    <input type="text">
    <input type="button" value="送信" onClick="submit();">
</form>

※ただし、form内にinputは2つだけど片方がtype='hidden'だったり、片方がtextareaの場合はEnterキー押下でsubmitされる。

暗黙的送信（Implicit submission）

これらの挙動は、暗黙的送信（Implicit submission） という仕様によるものらしい。
https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#implicit-submission

ざっくり言うと、この仕様により、

submitボタンは無いがフォームのinput要素が1つだけの場合
フォームのinput要素が複数あるが、有効なsubmitボタンが存在する場合

は、暗黙的送信が行われるということ。

type属性を省略したbuttonはsubmitボタンになる

ちなみに、buttonのtype属性を省略すると、デフォルトでtype="submit"になるらしい。

<button>戻る</button>

これも意図しない挙動を引き起こしかねないので、覚えておこうと思う。

さいごに

「Enterキーでformが送信されるのを防ぐ」という解決方法はすぐに見つかったが、やはりもう少し調べると色々勉強になることがあり、意図しない挙動を起こさない為にはきっちり理解することが大事だなと思った。

なぜこれで動くのか？なぜこの挙動になるのか？と、今後も疑問を持って知識を深めていきたい。