ASP.NET MVC - Как предотвратить двойной щелчок отправить с помощью jQuery.validate.Unobtrusize Lib?

Question

Мне нужно избегать поведения с двойным щелчком. Я использую проверку клиента с ненавязчивой библиотекой. У меня есть следующий код, чтобы избежать двойного клика:

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

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

     jQuery('form').preventDoubleSubmit();

К сожалению, если в моей форме есть некоторые достоверные поля (например, требуемое поле), приведенный выше код все еще запускается, следовательно, даже если я исправляю какие -либо ошибки в форме, я не смогу отправить его снова.

Как я могу запустить код двойного щелчка после того, как проверка была успешно сделана?

Answer 1

Я решил это со следующим кодом:

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;

линия, для:

self.attr('disabled', true);

Но если вы используете имя своих кнопок отправки на вашем контроллере для дополнительной логики, они будут отправлены как NULL. (Вы можете использовать дополнительное скрытое поле, чтобы взимать их перед отправкой)

Вот и все, надеюсь, это поможет

Родриго

РЕДАКТИРОВАТЬ: Спасибо этим сообщениям:jQuery новичок: Combine Palidiad

Answer 2

Вы также можете использовать JQuery One Event.

Я обнаружил, что могу преодолеть большинство охранников против двойного щелчка, быстро щелкнув. Использование одного события является единственным истинным способом убедиться, что событие запускается только один раз. Я не думаю, что эта техника будет работать «из коробки» с типом ввода = отправить тег. Вместо этого вы можете просто использовать кнопку ввода типа = 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); });
   }
});

Вы можете, очевидно, добавить здесь код отключения, если хотите дать отзывы пользователю, что кнопка больше не работает. Одним из отличных побочных эффектов использования одного события является то, что вам на самом деле не нужно делать кнопку отключенной, вы можете использовать собственный стиль.

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 Event: http://api.jquery.com/one/

Answer 3

Почему бы просто не использовать:

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);

Answer 4

На основе Популярный ответ Райана П. Я создал следующее общее решение, которое также работает с моей формой 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(... напрямую.

Answer 5

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

Answer 6

У меня есть форма, которая использует ненавязчивую проверку MVC3, и ViewModel с [RemoteatTribute]. Это похоже на то, что это событие отправки формы только стреляет только после того, как все подтверждение прошло. Я сейчас использую это, и, кажется, работает:

<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');
})

Answer 7

Я использую другой подход к этому. Не подключение к событию нажатия кнопки, а в событие отправки формы. Работает как очарование, чтобы предотвратить несколько одновременных подчиненных форм.

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;
            }
        }
    });
}

В документе готова я звоню в initformStopReventSImultionsUbmits (), чтобы init все формы на странице.

Единственное, что нужно помнить, это то, что, когда вы используете пост формы Ajax, - это вызвать initformStopReventSiMulticeSubmits ('#formid') на событии настройки AjaxOptions. Потому что в противном случае форма все еще будет помечена как подача, когда она сделана. Когда используется «нормальная» пост формы, это не проблема.

Answer 8

Распространяет ответы Алекс а также Райан п Для учетных записей для ситуаций, когда проверка 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();
        });
    });
};

Answer 9

Я смог решить аналогичную проблему с парой строк кода. Я предпочитаю это, если вы не хотите «предупреждать» пользователю, что он дважды щелкнул и просто молча игнорирует второй щелчок.

Я только что сделал глобальную переменную JavaScript, которую я переключил, когда моя функция выполняла во время критического раздела. Это удерживало последующие вызовы функций от повторного выполнения того же раздела.

 var criticalSection = false;

 SomeOnClickEventFired = function () {
      if (!criticalSection)
      {
            criticalSection = true;
            //Ajax Time
            criticalSection = false;
      }
 }