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

Question

実現したいこと。

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

前提

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

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

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

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

該当のソースコード

//入力されたEMPNOを送信し重複してないかを判定する
	return new Promise(resolve =>{

		fetch('http://localhost:3000/judgeEmpNo',{
			method: 'POST',
	  		headers: { 'Content-Type': 'application/json' },
	  		signal:signal,
                        //ここで編集中の従業員番号を送信
	  		body: JSON.stringify({empNo:empNo})
		})
		.then(response => response.json())
		.then(data =>{
			console.log(data);

			if(!data.length <= 0){
			//重複しているかどうかを従業員IDで判断
				if(!(Number(data[0].empId) == Number(empId))){
                //ここで画面遷移を中断させたい
                event.preventDefault();
					error.textContent='そのempNoはすでに登録されています';
				}else{
					error.textContent='';
					resolve();
				}
			}else{
				error.textContent='';
				resolve();
			}
		})
//node express側

//empNoが重複してないかチェックする

app.post('/judgeEmpNo',(req,res)=>{
	console.log('from / judgeEmpNo');
	let empNo = req.body.empNo;
	empNo = Number(empNo);
	connection.query(`select empId from Employee where empNo=${empNo}`,(err,result,field)=>{
		if (err) throw err;
		console.log(result);
		res.json(result);
	});
	
});

試したこと

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

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

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

Comments

[yambejp]

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

[abchdd]

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

[退会済みユーザー]

余計なお世話かもしれませんが一言・・・

何らかの問題で応答が返ってこなかった場合は、何のメッセージも表示されないままそこで止まってしまうということはありませんか。

もしそうであって、応答に時間がかかるとか返ってこないということが起こる環境であれば、クライアント側での検証は止めて、サーバー側だけでの検証にとどめておいた方が良いかもしれません。

自作ではなくフレームワーク組み込みの機能でもそういう問題がありました。以下ご参考まで:

RemoteAttribute による検証 (MVC5)
http://surferonwww.info/BlogEngine/post/2022/02/11/client-side-validation-using-remoteattribute.aspx

[abchdd]

ありがとうございます。

Answer 1

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

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

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

Answer 2

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

参考

<?PHP
$test=filter_input(INPUT_POST,"test");
if(!is_null($test)){
  if($test=="1"){
    die("success");
  }else if($test=="2"){
    die("fail");
  }else{
    header('HTTP/1.1 500 Internal Server Error');
    die("500 err");
  }
}
?>
<script>
const body=new FormData();
const method="post";
const 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));
body.append('test',1);
func();
body.set('test',2);
func();
body.set('test',3);
func();
</script>

Comments

[yambejp]

上記参考ソースを追記してあります。
（サーバーサイドはPHPで書いてあるので環境違ってわかりづらいうかもしれませんが
nodeでも同等のことはできるはずです）
(1)test=1のときは正常終了
(2)test=2のときは正常終了するけど、失敗したメッセージを返す
(3)それ以外のときは異常終了

さらに言えば、先にデータの存在を確認してから再送する手もありますが
確認時点ではデータがないが、登録データを送った時点ではデータがある場合もあるので
二段階でDB処理をするのは微妙ですね。

[abchdd]

ありがとうございます。