HTML で Form を作って送信前にバリデーション（入力内容が正しいか確認）したい時などに onsubmit をキャンセルしますよね。
今回、キャンセルできなくて謎に 1時間ほど消耗して悔しかったのでもう誰もこんなミスをしなくていいように書いておく。
原因: Form じゃなくて <Input type=”submit”> に onsubmit を書いていた
悲し過ぎますね。
正しいのがこっち。
|
1 2 3 4 |
<Form action="hoge" method="GET or POST" onsubmit="return validate();"> <Input type="text" name="fuga"> <Input type="submit" value="submit"> </Form> |
こっちが間違い。
|
1 2 3 4 |
<Form action="hoge" method="GET or POST"> <Input type="text" name="fuga"> <Input type="submit" value="submit" onsubmit="return validate();"> </Form> |
<input type="submit"> には onclick は反応するから余計にハマってしまった。
その他の原因１
ありがちなのは onsubmit の書き方。onsubmit は function なので最後に return false をしなければならないのだけど、例えば onsubmit="validate();" だと validate() でいくら return false を返していても onsubmit の function 内では何も返っていない。
正しくは onsubmit=”return validate();” とする。
何か処理した上で常にキャンセルしたいなら onsubmit="something(); return false;" とすればいい。常にキャンセルでありがちな失敗が onsubmit="false" これも onsubmit="return false;" としないといけない。
つまり、 onsubmit="" は、実際には onsubmit = function (変数) { } なので
|
1 2 3 |
function (hoge) { validate(); } |
ではなくて
|
1 2 3 |
function (hoge) { return validate(); } |
としないと何も値が返らないことがわかる。
その他の原因２
JavaScript 内でエラーが発生している。エラーが出ていないか確認してみる。
Form のデバッグの厄介なところは送信されてしまって console.log(); の結果が確認できないので、ブラウザのデバッグ画面でブレークポイントを活用する。もしくは簡単に alert(); で分岐や変数の中身を表示してみるとかでデバッグしてみると良いです。
こちらの記事がとても丁寧で参考になります。