2重クリックによるトークンエラーをクライアント側で予防する

問題の事象

フォームの2重送信を防ぐ目的でサーバーサイドではトークンチェックを利用しているが、ユーザー誤操作により2重タップが割と発生していることが判った。

対策

サーバーサイドではトークンチェックが入っているので正常に登録されるが、画面表示上はエラーとなるためユーザーにとっては、「本当に登録されているのか不安」な状況となってしまう。
ユーザービリティの意味でもクライアント側での制御を追加することになった。

(function($) {
$.preventDoubleSubmit = function() {
	var loading = false;
    $("form").submit(function(e) {
        var self = $(this);
        if (loading) {
        	e.stopPropagation();
        	return　false;
        }
        loading = true;
        // 10秒後から再送信が可能
        setTimeout(function() {
            loading = false;
        }, 10000);
    });
}
})(jQuery);