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

実現したいこと。

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

前提

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

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

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

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

該当のソースコード

javascript

12//入力された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/ツールのバージョンなど)

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

コメントを投稿

0 コメント