ajaxでsubmitをキャンセルする場合にreturn falseが効かない

Question

以下のようにajaxで非同期で条件判定をした結果"blank"と"missing"が得られた場合に
submitイベントをキャンセルしたく、以下のコメントアウトの箇所にreturn falseを設定しているのですがキャンセルされずにページが遷移してしまいます。
A/submitをキャンセル
B/submitをキャンセル

一方で、以下の箇所にreturnをした場合のみ、ページ遷移が止まり、submitがキャンセルされます。
return false;//C/submitをキャンセル

この挙動の原因がわからないので理由と解消方法をご教示いただきたくお願いします。
return falseすれば、それ以下のコードが実行されずに、加えて.submit()メソッドを使用している中であれば、submitイベントがキャンセルされるはずなのですが、想定した動作をしてくれません。

よろしくお願い申し上げます。

<form id="form_identifer" class="form_hoge" action="" method="POST">
 <input type="text">
 <button form="form_identifer" type="submit">送る</button>
</form>

$(function(){
  $('.form_hoge').on('submit',function(){
    $('.login-errmsgbox').empty();

     const login_username = $('#login_username').val();
     const login_pass = $('#login_pass').val();

     $.ajax({
         type:'POST',
         url:'xxx.php',
         datatype:'json',
         data:{
           transfer_login_username:login_username,
           transfer_login_pass:login_pass,
           transfer_login_token:token2
         }
        })
        .then(
          function(data){//success
            console.log(data);
              if (data=="succsess") {
                window.location.href="yyy.php";
              } else if(data=="blank"){
                $('<p id="er1" class="errmessage"><i class="fa fa-exclamation-circle" aria-hidden="true"></i>&nbspメールアドレスとパスワードを記入して下さい</p>').appendTo('.login-errmsgbox');
                return false; //A/submitをキャンセル
              } else if(data=="missing"){
                $('<p id="er2" class="errmessage"><i class="fa fa-exclamation-circle" aria-hidden="true"></i>&nbspメールアドレスかパスワードに誤りがあります</p>').appendTo('.login-errmsgbox');
                return false; //B/submitをキャンセル
              }
              },
          function(){//pattern fail
            alert('通信に失敗しました、通信環境を確認してください');
          }
       )
       return false;//C/submitをキャンセル
  })
})

Answer 1

一方で、以下の箇所にreturnをした場合のみ、ページ遷移が止まり、submitがキャンセルされます。

ajaxは非同期で実行されるため、on('submit'に登録している関数（ //Cまでの部分）が先に終わります。
（その時点で return false されていないので通常通りsubmitされる）

//Cでキャンセルして、thenに登録している関数内のifにelseをつけて、formのsubmitをJavaScriptで実行すればよいのでは。

Comments

[SugiuraY]

コメントありがとうございます。
無事、実装することができました！

Answer 2

下記ブログを参考にしてみてください。

https://pie001.hatenablog.com/entry/2017/01/25/195758

ajax内の条件分岐では変数に値を代入するだけにして、ajax外でその変数をもとに条件分岐をしてreturn falseをすればうまくいくはずです。

Comments

[SugiuraY]

コメント有難うございます。
確かに外に出すことで実現できました！
しかしながら、記事に載っている、return falseを戻り値としているからというのは、違和感があるのですがらkei344様がいうように、非同期のためらキャンセルされる前に最後まで実行されるからではないのでしょうか。
それとも、これらは実際には同じ事を意味しているのでしょうか？
少し気になったため、コメントさせて頂きました。

[SugiuraY]

すみません、今自分もポツポツと考えていたのですが、
確かにajax.then()の中でのreturn falseはsubmitのキャンセルとしてではなくajaxの戻り値としてfalse値を返しているだけという点も正しいのではないかと腹落ちしてきました。。
何れにしても、分岐で得た値から外で処理すれば良いことには変わりないのですが、、、