JSのPromise処理でのsubmit送信を中断

Question

jQueryのajaxでフォーム送信時にPOST前にDBの重複チェックを行い、チェックに引っかからなければそのままPOST送信、
チェックに引っかかった場合は送信処理を中断してアラート出力のスクリプトを作成中です。

問題は判定エラー時にアラート表示されても確認後にPOST送信が行われてしまいます。
非同期通信用の ajaxJsonResult は共通で使用しているためなるべくコードを流用したいのですが、
現状の構成でsubmitのイベントキャンセル伝達はできなでしょうか？

// jsonデータをajax送信
function ajaxJsonResult(url, datas, timeout, caches){
    return new Promise(function(resolve){
        $.ajax({
            url: url, type: 'POST', data: datas, timeout: timeout, contentType: "application/json", dataType: "json", caches: caches,
        }).done(function(results){
            resolve(results);
        }).fail(function(jqXHR, textStatus, errorThrown){
            console.log("データ取得失敗")
        });
    })
}

// 送信前にバックエンドでデータの重複チェック
$('form').submit(function(e) {
    ajaxJsonResult('/post_url/',  {"id":"1"}, 5000, true).then((results) => {
        if(results.status == "success"){
            // 判定クリア時は追加処理後に送信
        }else{
            // 判定エラー時はフォーム送信中断
            alert("重複エラー");
            e.stopPropagation();    // submit処理中止
        }
    }).catch((err) =>{ console.error(err);});
});

※バックエンドはDjangoで送受信処理は問題なく実装できております。
どうぞ宜しくお願いいたします。

Answer 1

そもそも、フォームsubmitではなくボタンclickで処理すれば良いのでは？
ボタンもsubmitではなくbuttonにしておけばキャンセルを考える必要もないかと思います。
OKのときだけJavaScriptでsubmitをします。

Comments

[sika]

ご回答ありがとうございます。
煮詰まり過ぎて根本的な事に気付きませんでした・・・お恥ずかしい限りです
ご指摘通りボタンclickに変更し、判定クリア時に
`$('form').submit()`
に修正致しました。

Answer 2

POSTをして登録・更新をかけて、失敗したときにエラーをだしてください。
チェックして再送信だとチェックと再送信の間にエラーになる
作業がはいる可能性があります

Comments

[sika]

ご回答ありがとうございます。

仕様上、フォーム内にユーザー側で動的にフォームタグを追加する項目が多く、
通常のサーバー側での送信後のエラーリダイレクトが起こった際に入力画面に戻るとユーザー側で動的追加した項目がリセットされてしまうためどうしても送信前にすべての入力値に対してバリデーション処理を行いたかった次第です・・

[yambejp]

そういうことであれば事前チェクは行うとして、本ちゃんのサブミット時にも
確実の事前と同等のチェックはいれてください

[sika]

ご返信ありがとうございます。
色々と言葉足らずで申し訳ございません。

フロント側でのチェックはあくまで入力値のDB重複チェック（過去に同じ組み合わせの設定がされているか）までの範囲を想定しております。
サーバー送信時は同等のチェックを踏まえてきちんとバリデーションを実装させていただきます。
ご親身にアドバイスいただきありがとうございました。

Answer 3

同期処理

JavaScriptから同期Submit送信をabortする方法は私の知る限りでは有りません。
同期処理はJavaScriptを介さずに行われる処理であり、それをJavaScriptから制御する機能が実装されている可能性は低いと考えます。

サーバサイドスクリプト側でajax処理を捕まえて、submit処理側と同期を取って処理を停止する必要がありますが、そうするぐらいなら、sumit送信を受けるサーバサイドスクリプト側にajax処理を含める方が遥かにスマートでしょう。

妥協案

どうしても、ajaxで追加処理をさせたいのなら、下記実装が考えられます。

1. event.preventDefault()
2. ajax処理
3. ajax処理成功時に event.target.submit()

ただし、ajax処理が完了するまで同期submitを待機させる事となり、非同期処理の利点は失われます。
また、ユーザは「submitボタン押下後に通信が何も発生せず、しばらく待った後に突然submit送信が始まる」という現象になる為、決して分かりやすいUIとはいえず、ユーザビリティが低い実装となります。

submit受け側のサーバサイドスクリプトに追加処理を加えるのが最適解なのは間違いないと思います。

Re: sika さん

Comments

[sika]

ご回答ありがとうございます。
> sumit送信を受けるサーバサイドスクリプト側にajax処理を含める方が遥かにスマートでしょう。
おっしゃる通りです。

仕様上、フォーム内にユーザー側で動的にフォームタグを追加する項目も多く、送信後の入力値エラーの場合にリダイレクトで入力画面に戻るとユーザー側で動的追加した項目がリセットされてしまうためどうしても送信前にすべてのバリデーション処理を行いたかった次第です・・・