フォームの二重送信を防ぎたい

Question

フォームボタンを以下のように設置した場合で
二重送信を防ぎたいのですが
どのようにすればよいのでしょうか？

この状態であれば、消えてボタンが押せなくなるようになっているのですが、
バリデーションでエラーが発生したときにもボタンが消えてしまいます。
意図としている動作は
エラーではボタンが消えないようにしたいのですが、なにか方法があるのでしょうか？

よろしくおねがいします

<form action="" method="post" id="form">
    <ul>
        <li><input type="email" name="email" class="email" placeholder="Email"></li>
        <li><input type="text" name="name" class="name" placeholder="名前"></li> --}}
        <li><button type="submit" class="btn"> ご購入手続き </button></li>
    </ul>
</form>

<style>
    .loading {
        display: none;
    }
</style>

<script>

    $(function() {
        $('form').on('submit', function() {
            $('.btn').hide();
            $('.loading').show();
        });
    });
</script>

追記：
連続クリックを防ぐために、一度クリックすると、ボタンは消えてなくなるようにしております
バリデーションエラーに関しては再読み込みせず表示されます
こういった仕様の場合、バリデーションエラーには反応しないようにできるのでしょうか？

Comments

[m.ts10806]

「二重送信防止」あたりで調べて考え方を知るところからだと思うのですが、どの程度調べて試されたのでしょうか。
※いちいち自分で考えなくてもやり方はほぼ確立されているので出尽くしているという意味です

[creative_09]

一応、調べてサンプルがあれば試したりもしたんですが、
一度でも送信ボタンを押すと無効のままになるものが多いように感じました。
自分のおもうような実装方法もあるということでしょうか？

[退会済みユーザー]

エラーを判別するのがjs上なら、js上の処理でもう一度ボタンを有効化しなければならないのでは？ phpで判定するなら、いっそajaxにしちゃえばいいのに。

[creative_09]

そのJS自体をこちらでいじることができない場合はほかに手段はないということでしょうか？

[退会済みユーザー]

ajaxでPOST送信して、responseに判定結果を封じ込めたものを受け取れば、jsでボタンを最有効化する判断材料にできる。ajax使わない場合は、POST送信した結果を別途取得しに行く方法を考えなきゃいけなくて煩雑。

[creative_09]

実現しようと思えばそういう実装になるのですね
そこからまた色々しらべてみます。
ありがとうございました

Answer 1

送信ボタンを押したあとのページを再読み込みすれば、
同じ送信データを送信しての表示になるため、
二重送信になってしまいます。

かんたんな解決方法は、
送信データを受け付けて処理が終わったら、
一覧表示など最初のページにリダイレクトすればいいです。

PHP: header - Manual
を駆使すれば、リダイレクトできます。

Comments

[creative_09]

ありがとうございます。
説明不足だったので、編集します