ASP.NET MVC -jquery.validate.nobtrusive libをwith jquery.validateで送信するダブルクリックを防ぐ方法？

StackOverflow https://stackoverflow.com/questions/4539302

質問

ダブルクリックの送信動作を避ける必要があります。目立たないライブラリでクライアントの検証を使用しています。二重クリックを避けるための次のコードがあります。

jQuery.fn.preventDoubleSubmit = function () {
         var alreadySubmitted = false;
         return jQuery(this).submit(function () {

             if (alreadySubmitted)
                 return false;
             else {
                 alreadySubmitted = true;
             }
         });
     };

     jQuery('form').preventDoubleSubmit();

残念ながら、私のフォームにいくつかの有効なフィールド（たとえば、必要なフィールド）がある場合、上記のコードはまだ起動されています。したがって、フォームの間違いを修正しても、再び提出することはできません。

検証が成功した後、ダブルクリックコードを発射するにはどうすればよいですか？

役に立ちましたか？

解決 2

次のコードで解決しました。

var tryNumber = 0;
 jQuery('input[type=submit]').click(function (event) {
     var self = $(this);

     if (self.closest('form').valid()) {
         if (tryNumber > 0) {
             tryNumber++;
             alert('Your form has been already submited. wait please');
             return false;
         }
         else {
             tryNumber++;
         }
     };
 });

注：次のものを交換することもできます。

return false;

ライン、for：

self.attr('disabled', true);

ただし、追加のロジックのためにコントローラーの送信ボタンの名前を使用すると、それらはnullとして送信されます。 （追加の隠しフィールドを使用して、提出する前に充電できます）

それだけです、それが役立つことを願っています

ロドリゴ

編集：これらの投稿に感謝します：JQuery Newbie：検証とHiddingの送信ボタンを組み合わせます

他のヒント

使用することもできます jQuery Oneイベント.

私は、速くダブルクリックすることで、ほとんどの警備員をダブルクリックに対して通り過ぎることができることを発見しました。 1つのイベントを使用することは、イベントが一度だけ解雇されることを確認する唯一の真の方法です。この手法は、入力タイプ=送信タグで「箱から出して」機能するとは思わない。代わりに、入力型=ボタンを使用するか、 jqueryuiの.button（）.

$("#submitButton").one("click", function(event) {
   $('#theForm').submit();
});

検証エラー（またはその他の状況）でイベントを再配線する必要がある場合は、イベントハンドラーの関数を作成することをお勧めします。イベントハンドラーはすべてフォームを送信することであるため、この例では関数は必要ありませんが、より複雑なシナリオでは、繰り返しを避けてください。

function submitClick(event) {
   $('#theForm').submit();
}

$("#submitButton").one('click', function(event) {
   submitClick(event);
});

// This handler will re-wire the event when the form is invalid.
$('#theForm').submit(function(event) {
   if (!$(this).valid()) {
      event.preventDefault();
      $('#submitButton').one('click', function(event) { submitClick(event); });
   }
});

ボタンが機能しなくなったことをユーザーにフィードバックを提供したい場合は、明らかにここに無効化コードを追加できます。 1つのイベントを使用することの大きな副作用は、実際にボタンを無効にする必要がないこと、独自のスタイルを使用できることです。 

function submitClick(event) {
   $('#submitButton').addClass('disabledButton');
   $('#theForm').submit();
}

$("#submitButton").one('click', function(event) {
   submitClick(event);
});

// This handler will re-wire the event when the form is invalid.
$('#theForm').submit(function(event) {
   if (!$(this).valid()) {
      event.preventDefault();
      $('#submitButton').one('click', function(event) { submitClick(event); });
      $('#submitButton').removeClass('disabledButton');
   }
});

jQuery Oneイベント： http://api.jquery.com/one/

使用してみませんか：

function disableButtons() {
    var form = $(this);
    var btns = $("input:submit", form);

    if (!form.valid()) {
        // allow user to correct validation errors and re-submit
        btns.removeAttr("disabled");
    } else {
        btns.attr("disabled", "disabled");
    }
}

ボタンを無効にして、次のことを使用してアクティブにします。

$("form").bind("submit", disableButtons);

に基づく ライアンPの人気のある答え Ajaxフォームでも動作する次の汎用ソリューションを作成しました。

次のクラスでカスタム送信ボタンを飾ります。

<button type="button" class="one-click-submit-button">Submit</button>

JavaScriptファイルに以下を追加します。

function OneClickSubmitButton() {
    $('.one-click-submit-button').each(function () {
        var $theButton = $(this);
        var $theForm = $theButton.closest('form');

        //hide the button and submit the form
        function tieButtonToForm() {
            $theButton.one('click', function () {
                $theButton.hide();
                $theForm.submit();
            });
        }

        tieButtonToForm();

        // This handler will re-wire the event when the form is invalid.
        $theForm.submit(function (event) {
            if (!$(this).valid()) {
                $theButton.show();
                event.preventDefault();
                tieButtonToForm();
            }
        });
    });
}

OneClickSubmitButton();

これはAjaxフォームであるため、サーバーの検証に失敗した場合は、ハンドラーをリロードしたいと考えています。

function MyForm_OnSuccess() {
    if (true if your form passed validation logic) {
        //do something since your form submitted successfully
    } else { //validation failed on server
        OneClickSubmitButton(); //reinitialize the button logic
    }
}

明らかに、ajaxフォームがない場合は、全体を省略できます OneClickSubmitButton ビジネスと実行 $('.one-click-submit-button').each(... 直接。

 $('form').submit(function () {
 $('input[type="submit"]', this).attr('disabled', 'disabled');
   });

MVC3を使用していない検証を使用するフォームと、[Remoteattribute]を備えたViewModelがあります。フォームの送信イベントは、すべての検証が通過した後に発砲するだけのように見えます。私は現在これを使用していますが、それは機能しているようです：

<input type="submit" value="Submit the Form" 
    data-app-disable-on-submit="true" />

$('form').live('submit', function() {
    $(this).find('input[type="submit"][data-app-disable-on-submit="true"]')
                .attr('disabled', 'disabled');
})

;

リモート属性検証アクションメソッドとHTTPPOSTアクションメソッドの両方でブレークポイントを設定します。 [送信]ボタンをクリックして、最初にボタンをクリックして、検証アクションメソッドのブレークポイントにヒットします。この時点で、ボタンは引き続き有効です。複数回クリックすることができ、検証方法を再開した後、httppostは一度だけヒットします。 httppostがヒットすると、送信ボタンが無効になります。

アップデート

あなたはアレックスです。したがって、上記の更新されたバージョンは次のようになります。

$('form').on('submit', function() {
    $(this).find('input[type="submit"][data-app-disable-on-submit="true"]')
                .attr('disabled', 'disabled');
})

これに別のアプローチを使用しています。ボタンのクリックイベントではなく、フォームの送信イベントに配線します。フォームの複数の同時提出を防ぐための魅力のように機能します。

function initFormsToPreventSimultaneousSubmits(selector) {
    if (!selector) {
        selector = 'form'; // No selector supplied, apply to all forms on the page
    }

    // Make sure all forms that conform to selector are marked as not submitting
    $(selector).each(function()
    {
        var $form = $(this);
        $form.data('submitting', false);
    });

    // Attach to submit event of all forms that conform to selector
    $(selector).off('submit').on('submit', function (e) {
        var $form = $(this);

        if (!$form.valid || $form.valid()) { // Make sure to only process when the form is valid or jquery validation is not used
            if ($form.data('submitting')) {
                // form is already submitting. Classic case of double click on one of the submit buttons of the form. Stop the submit
                e.preventDefault();
                return false;
            } else {
                // All ok, mark the form as submitting and let the form perform the submit
                $form.data('submitting', true);
                return true;
            }
        }
    });
}

Document Readyでは、initformstopreventsimultaneoussubmits（）を呼び出して、ページ上のすべてのフォームを開始します。

覚えておくべきことは、ajaxフォーム投稿を使用する場合、ajaxoptions設定のoncompleteイベントでinitformstopreventsimultaneoussubmits（ '＃formid'）を呼び出すことです。それ以外の場合、フォームは、完了したときに提出するものとしてマークされるためです。 「通常の」フォーム投稿を使用する場合、これは問題ではありません。

回答を拡張します アレックス と ライアンp jQueryの検証が欠落している可能性があり、複数の送信ボタンが単一の形式で存在する状況を説明します。

oneClickSubmitButton = function () {
    $('input[type=submit], button[type=submit], input[type=image]').each(function () {
        var $theButton = $(this);
        var $theForm = $theButton.closest('form');

        //hide the button and submit the form
        function tieButtonToForm() {
            $theButton.one('click', function () {
                $theButton.addClass('ui-state-disabled');
            });
        }

        tieButtonToForm();

        $theForm.submit(function (event) {
            // Only proceed for the clicked button
            if (!$theButton.hasClass("ui-state-disabled"))
                return;

            // If jQuery Validation is not present or the form is valid, the form is valid
            if (!$theForm.valid || $theForm.valid())
                return;

            // Re-wire the event
            $theButton.removeClass('ui-state-disabled');
            event.preventDefault();
            tieButtonToForm();
        });
    });
};

コードの数行で同様の問題を修正することができました。ユーザーがダブルクリックし、2回目のクリックを静かに無視することをユーザーに「警告」したくない場合は、これを好みます。

重要なセクションで機能が実行されたときに切り替えたグローバルJavaScript変数を作成しました。これにより、後続の関数呼び出しが同じセクションを再実行することを維持しました。 

 var criticalSection = false;

 SomeOnClickEventFired = function () {
      if (!criticalSection)
      {
            criticalSection = true;
            //Ajax Time
            criticalSection = false;
      }
 }
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top