質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

Q&A

解決済

2回答

1593閲覧

Javascript 非同期処理の中で画面遷移を阻止する方法

abchdd

総合スコア1

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

0グッド

1クリップ

投稿2023/04/28 05:24

実現したいこと。

  • [ ]Javascript 非同期処理の中でsubmit処理を中断させたい

前提

jspページで従業員登録や更新、削除ができる画面を作成中です。
従業員番号がすでに登録されている場合フォーム送信を中断し
エラー文を表示する機能を実装したのですがエラー文が一瞬表示された後
画面遷移が中断されず遷移してしまいます。

非同期処理の中で画面遷移を阻止する方法知りたいです。

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

event.preventDefault()で画面遷移を防ぐはずが中断されず遷移してしまう。

該当のソースコード

javascript

1 2//入力されたEMPNOを送信し重複してないかを判定する 3 return new Promise(resolve =>{ 4 5 fetch('http://localhost:3000/judgeEmpNo',{ 6 method: 'POST', 7 headers: { 'Content-Type': 'application/json' }, 8 signal:signal, 9 //ここで編集中の従業員番号を送信 10 body: JSON.stringify({empNo:empNo}) 11 }) 12 .then(response => response.json()) 13 .then(data =>{ 14 console.log(data); 15 16 if(!data.length <= 0){ 17 //重複しているかどうかを従業員IDで判断 18 if(!(Number(data[0].empId) == Number(empId))){ 19 //ここで画面遷移を中断させたい 20 event.preventDefault(); 21 error.textContent='そのempNoはすでに登録されています'; 22 }else{ 23 error.textContent=''; 24 resolve(); 25 } 26 }else{ 27 error.textContent=''; 28 resolve(); 29 } 30 }) 31//node express側 32 33//empNoが重複してないかチェックする 34 35app.post('/judgeEmpNo',(req,res)=>{ 36 console.log('from / judgeEmpNo'); 37 let empNo = req.body.empNo; 38 empNo = Number(empNo); 39 connection.query(`select empId from Employee where empNo=${empNo}`,(err,result,field)=>{ 40 if (err) throw err; 41 console.log(result); 42 res.json(result); 43 }); 44 45}); 46

試したこと

送信ボタンの要素にdisable=Trueをして無効化しようとしたが失敗した
フォームのonSubmitで関数を実行し戻り値をfalseにして無効化しようとしたが失敗した。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2023/04/28 05:29

根本的な勘違いをされているようにお見受けしますが Promiseでfetchの中にあるevent.preventDefaultって何を止めようとしていますか? eventは何を想定しているのでしょうか?
abchdd

2023/04/28 05:37

情報不足で失礼いたしました。 このコードは関数の一部分です。送信ボタンにはIDとしてsubmitを設定しています。  document.getElementById('submit').addEventListener('click',function(){関数名(event)}) で登録ボタンを押したらフォームの内容をチェックする関数を実行します。 フォームに入力された従業員番号が被っているかどうかをデータベースから取得したデータをもとに 検証しもしかぶっていた場合登録ボタンの送信処理を止めてエラーメッセージを表示するという形にしたかったというものです。
退会済みユーザー

退会済みユーザー

2023/04/28 06:06 編集

余計なお世話かもしれませんが一言・・・ 何らかの問題で応答が返ってこなかった場合は、何のメッセージも表示されないままそこで止まってしまうということはありませんか。 もしそうであって、応答に時間がかかるとか返ってこないということが起こる環境であれば、クライアント側での検証は止めて、サーバー側だけでの検証にとどめておいた方が良いかもしれません。 自作ではなくフレームワーク組み込みの機能でもそういう問題がありました。以下ご参考まで: RemoteAttribute による検証 (MVC5) http://surferonwww.info/BlogEngine/post/2022/02/11/client-side-validation-using-remoteattribute.aspx
abchdd

2023/04/28 06:05

ありがとうございます。
guest

回答2

0

ベストアンサー

非同期処理の中で画面遷移を阻止する方法知りたいです。

そんなことはできません(非同期実行が完了するsubmitが動作してしまうので間に合いません)。

非同期処理に入る前に画面遷移を止めてから、非同期処理が意図したように進めば.submit()で改めてページ遷移を駆動させる、というように逆転させて考える必要があります。

投稿2023/04/28 05:34

maisumakun

総合スコア146018

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

単純に従業員情報を送った際に、すでにデータが登録されていたらエラーステータスを返すか、エラーでおわった旨のメッセージを返せばよいと思います

参考

javascript

1<?PHP 2$test=filter_input(INPUT_POST,"test"); 3if(!is_null($test)){ 4 if($test=="1"){ 5 die("success"); 6 }else if($test=="2"){ 7 die("fail"); 8 }else{ 9 header('HTTP/1.1 500 Internal Server Error'); 10 die("500 err"); 11 } 12} 13?> 14<script> 15const body=new FormData(); 16const method="post"; 17const func=()=>fetch('',{body,method}).then(res=>res.text().then(body =>({ body,ok:res.ok,status:res.status}))).then(({body,ok,status})=>{if(!ok) throw new Error(status);return body}).then(txt=>console.log(txt)).catch(err=>console.error(err)); 18body.append('test',1); 19func(); 20body.set('test',2); 21func(); 22body.set('test',3); 23func(); 24</script>

投稿2023/04/28 05:31

編集2023/04/28 06:08
yambejp

総合スコア116724

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2023/04/28 06:32 編集

上記参考ソースを追記してあります。 (サーバーサイドはPHPで書いてあるので環境違ってわかりづらいうかもしれませんが nodeでも同等のことはできるはずです) (1)test=1のときは正常終了 (2)test=2のときは正常終了するけど、失敗したメッセージを返す (3)それ以外のときは異常終了 さらに言えば、先にデータの存在を確認してから再送する手もありますが 確認時点ではデータがないが、登録データを送った時点ではデータがある場合もあるので 二段階でDB処理をするのは微妙ですね。
abchdd

2023/04/28 06:45

ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問