JSでの送信イベントのキャンセルがうまくいかない

Question

やりたいこと

フォームに入力された数字のバリデーションをしたいと思っています。
入力が不正な場合、submitされた時点でアラートを出し、
送信イベントをキャンセルしたいです。

現状

自分なりに調べて、addEventListenerとevent.preventDefault()を使う方法でやってみました。
（外部ファイルに全て書きたかったので、HTMLのonsubmitに書き込む形は回避しました）

document.getElementById("form").addEventListener("submit",function(){

    var date=document.getElementById("date");
    var myregex=new RegExp(/^[0-9]{6}$/);

    if(date.value!=="" && date.value.match(myregex)===null){
        window.alert("日付は6桁の数字で入力してください。");
        event.preventDefault();
    }

});

このようにしたところ、最初何度かは正常に動いた（送信イベントをキャンセルできた）ように思ったのですが、何回か実行するうちに、送信イベントがキャンセルされなくなりました。
アラートは出るのですが、そのまま送信されてしまいます。

どこがおかしいのでしょうか。
ご指導お願いいたします。

Comments

[退会済みユーザー]

イベントの止め方は他の方が書かれてる通りと思いますが、それ以外に日付未入力の場合の処理もおかしいようです。

[退会済みユーザー]

ありがとうございます。日付については複数の検索項目の一つとしており、空欄可能としています。空欄または6桁を許容としています。

Answer 1

何度か動いたの部分がちょっと分からないですが、

  event.preventDefault();

のeventはaddEventListenerに渡しているイベントハンドラの引数で受け取ってください。

document.getElementById("form").addEventListener("submit",function(event){

    var date=document.getElementById("date");
    var myregex=new RegExp(/^[0-9]{6}$/);

    if(date.value!=="" && date.value.match(myregex)===null){
        window.alert("日付は6桁の数字で入力してください。");
        event.preventDefault();
    }

});

Comments

[退会済みユーザー]

ありがとうございます！

Answer 2

サブミットしているaddEventListenerのコールバックに引数eventをわたしてあげてください

.addEventListener("submit",function(event){

Comments

[退会済みユーザー]

ありがとうございます！

Answer 3

んー、単純に <input type="submit"> や <button type="submit"> を使わずに、
<button type="button"> を使って、
button のクリックイベントでバリデーションして、通過したら<form>をサブミットかける方がいいですね。

イベントを拾ってダメならキャンセルして～とか、処理を複雑にしていくだけです。

Comments

[m.ts10806]

確かに冗長な気がします。
どうしても作りは参考にしたサイトに依存してしまいますね。

[退会済みユーザー]

いまどきJS切ってあるってことも無いと思いますけど、もしそれにも対応したいなら<button type="submit">でHTML出力しておいて、JSが実行出来たらattr("type")を書き換えちゃえばいいと思うので、経験上、絶対その方が楽です。

[x_x]

submitボタンを置かなければJavaScriptが無効のときに送信できなくなるし、置いているならinputのEnterで検証なしで送信されるため、元のほうがいいかと思います。

[退会済みユーザー]

勝利！

[退会済みユーザー]

まぁ、大体今時はJS切られてるとサイト自体マトモに表示すらできなかったりして、JS切ってる事を想定するのはせいぜい行政サイトくらいになるんだけど、そういうのに携わってるのはSIの奴らとかくらいで、あいつら、欠陥はやたら嫌うし工数増えるのやたら嫌うからサーバーサイドでバリデートしなければならない上に、クライアントサイドでもバリデーション搭載して、する場合としない場合についてケース対応するとかなったらめんどくさいから絶対「バリデーションはサーバーサイドだけでしましょう」とか押し切るだけなので、もう、JSが効かない場合の事なんか考えるだけ、無駄無駄。

[x_x]

後半は？ submitボタンが複数ある場合もあるし、変なことするより単にsubmitでのイベントを抑えたほうがいいのでは？

[退会済みユーザー]

複数あってもtype="button"の方が楽っす。

[m.ts10806]

まあ要件次第と言うことで。

[x_x]

楽とかいう問題ではなく、動きが変わるんですが？
Enterキーを監視するようにしろというのでしょうか？

[退会済みユーザー]

Enterでsubmitするのなんか、劣悪ユーザビリティの代表じゃないですか。なんでそんな事して、ユーザーに不快感を与えたいんですか？

[退会済みユーザー]

チャットじゃないんですよ？

[退会済みユーザー]

<input type="submit">の最大の問題って、formにボタンが一つの場合、関係ないinputフィールドの入力時に押したEnterとかでもsubmitが発動しちゃったりする事なんですよ。

[退会済みユーザー]

これだな。
4.10.21.2 Implicit submission

A form element's default button is the first submit button in tree order whose form owner is that form element.

If the user agent supports letting the user submit a form implicitly (for example, on some platforms hitting the "enter" key while a text control is focused implicitly submits the form), then doing so for a form, whose default button has activation behavior and is not disabled, must cause the user agent to fire a click event at that default button.

There are pages on the Web that are only usable if there is a way to implicitly submit forms, so user agents are strongly encouraged to support this.

https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#implicit-submission

だから、type="submit"のボタンなんか作るべきではないという結論になるんです。

[退会済みユーザー]

ご指摘の点、考えてみたいと思います。
・複数のフォームを同時に送信している
・エンターキーで送信したい
というようなあたりから、サブミットイベントの処理が要りそうな感じもしているのですが、いずれにしてももっと勉強してきちんと考えたいと思います。

Answer 4

eventを受け取っていません。

document.getElementById("form").addEventListener("submit",function(event){

Comments

[退会済みユーザー]

ありがとうございます！