以下のようにajaxで非同期で条件判定をした結果"blank"と"missing"が得られた場合に
submitイベントをキャンセルしたく、以下のコメントアウトの箇所にreturn falseを設定しているのですがキャンセルされずにページが遷移してしまいます。
A/submitをキャンセル
B/submitをキャンセル
一方で、以下の箇所にreturnをした場合のみ、ページ遷移が止まり、submitがキャンセルされます。
return false;//C/submitをキャンセル
この挙動の原因がわからないので理由と解消方法をご教示いただきたくお願いします。
return falseすれば、それ以下のコードが実行されずに、加えて.submit()メソッドを使用している中であれば、submitイベントがキャンセルされるはずなのですが、想定した動作をしてくれません。
よろしくお願い申し上げます。
html
1<form id="form_identifer" class="form_hoge" action="" method="POST"> 2 <input type="text"> 3 <button form="form_identifer" type="submit">送る</button> 4</form>
javascript
1$(function(){ 2 $('.form_hoge').on('submit',function(){ 3 $('.login-errmsgbox').empty(); 4 5 const login_username = $('#login_username').val(); 6 const login_pass = $('#login_pass').val(); 7 8 $.ajax({ 9 type:'POST', 10 url:'xxx.php', 11 datatype:'json', 12 data:{ 13 transfer_login_username:login_username, 14 transfer_login_pass:login_pass, 15 transfer_login_token:token2 16 } 17 }) 18 .then( 19 function(data){//success 20 console.log(data); 21 if (data=="succsess") { 22 window.location.href="yyy.php"; 23 } else if(data=="blank"){ 24 $('<p id="er1" class="errmessage"><i class="fa fa-exclamation-circle" aria-hidden="true"></i> メールアドレスとパスワードを記入して下さい</p>').appendTo('.login-errmsgbox'); 25 return false; //A/submitをキャンセル 26 } else if(data=="missing"){ 27 $('<p id="er2" class="errmessage"><i class="fa fa-exclamation-circle" aria-hidden="true"></i> メールアドレスかパスワードに誤りがあります</p>').appendTo('.login-errmsgbox'); 28 return false; //B/submitをキャンセル 29 } 30 }, 31 function(){//pattern fail 32 alert('通信に失敗しました、通信環境を確認してください'); 33 } 34 ) 35 return false;//C/submitをキャンセル 36 }) 37}) 38
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/06/10 23:08