submit時にバリデーションを実行したいがそのまま送信されてしまう

Question

前提・実現したいこと

1. 送信buttonを押すとsubmitする
2. ただし、submit前にバリデーションを実行し、違反するならばsubmitを中止したい

ここでは、バリデーションはチェックボックスに一つ以上せんたくされていることとします。

発生している問題・エラーメッセージ

• submitが中断されず画面遷移してしまう

該当のソースコード

<form id="form_id" method="" action="">

<input type="checkbox" class="checkbox-hoge" checked="checked">
(...)
<button class="btn-submit" type="submit" formaction="/hoge">送信</button>
</form>

$(function(){
    $('.btn-submit').submit(function() {
    let result = $('.checkbox-hoge:checked').map(function() {
        return $(this).val();
    }).get();
    if (result.length === 0 ){
        return false;
    }
    })
});

参考URL

https://qiita.com/kazu56/items/cdbf4e371cdc699709f1

Answer 1

submitイベントはform要素から発すると思われ。

// $('.btn-submit').submit(function() {
//       ↓
   $('#form_id').submit(function() {

Answer 2

submitなので止めない限り送信されます。
preventDefault()でsubmit自体止めてtrue時に.submit()するか
type=buttonにしてclick時のイベントにしてformを.submit()してください。

Comments

[plato]

回答有り難うございます！
すみません、一つおたずねしてもよいでしょうか。
こちらを参考にして 関数内で `return false` で返すとsubmitを中止できるとあったのですが、この方法ではできないのでしょうか。
https://qiita.com/kazu56/items/cdbf4e371cdc699709f1

[m.ts10806]

では、単にreturn falseだけ書いた場合はどうですか？ボタンにidをつけてそのidのイベントにした場合は？
いずれにしてもイベントの発生が「submit時」だと送信されてしまっても仕方はないと思います。
buttonのclickイベントの方が確実です

[plato]

回答ありがとうございます
すみません、参照先のコードを誤解しておりました。form要素で指定したところ動作しました。

[m.ts10806]

解決されたようで何よりです