formのonsubmitが実行されないケース

formにonsubmitを付けているとき、例えば以下のようにするとcalledBeforeSubmit();が実行されない。

<form action="/hoge" onsubmit="return calledBeforeSubmit();">
    <input type="hidden" name="hiddenValue" value="fuga">
    <input type="button" onclick="this.form.submit();"><!-- ここが駄目 -->
</form>

<script type="text/javascript">
const calledBeforeSubmit = () => {
    // 処理...
    return true;
};
</script>

どうやら<input type="button" onclick="this.form.submit();">のようにonclick属性からformをsubmitするとonsubmitが実行されないぽい。

以下のように素直に<input type="submit">を使う必要がある。

<form action="/hoge" onsubmit="return calledBeforeSubmit();">
    <input type="hidden" name="hiddenValue" value="fuga">
    <input type="submit"><!-- これなら大丈夫 -->
</form>

<script type="text/javascript">
const calledBeforeSubmit = () => {
    // 処理...
    return true;
};
</script>

調べてみると、MDNのドキュメントにこんなことが書いてあった。

Gecko ベースのアプリケーションからこのメソッドを呼び出すときに、フォームの onsubmit イベントハンドラ (例 : onsubmit="return false;") はトリガされません。一般的に、ユーザエージェントによる呼び出しは保証されていません (※参照 : http://lists.w3.org/Archives/Public/www-dom/2012JanMar/0011.html)

「Gecko ベースのアプリケーション」が何なのかはイマイチわからないが、ブラウザのUserAgentにはよく「Gecko」という単語を見かけるので、おそらくそれの事なんじゃないかと思っている。