Как уничтожить проверку JQuery и любые дальнейшие попытки отправки?

Question

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

В основном, что происходит, это то, что форма загружает URL в действииатрибута, когда нет javascript, так что просто отменная привязка не работает ... (даже если бы это было так, я всегда могу достаточно быстро нажать ввод / нажатие, чтобы заставить его сделать еще пару слов ...)

jQuery('.desired').validate({
    debug: true,
    rules: {
        email: {
            required: true,
            email: true
        }
    },
    wrapper: "div",
    messages: {
        email: "Please enter a valid email address."
    },
    errorPlacement: function(error, element) {
        error.hide().appendTo(element.parent()).hide().slideDown();
    },
    errorClass: 'help-text',
    submitHandler: function(form) {

        var $ = jQuery;

        var url   = $(form).attr('action');
        var query = $(form).serialize();

        $.ajax({
            url: url,
            type: "POST",
            data: query,
            success: function() {


                $("<p class='help-jquery'><b>Thanks</b>")
                    .insertAfter(jQuery(form))
                    .css('height', function(i,h) {
                        $(this).hide()
                        return h;
                    });

                // $(form).css('height', $(form).height());
                $(form).slideUp('slow');
                $(form).fadeOut({ queue: false, duration: 'slow' });


                // $('.help-jquery').fadeIn('slow');

                $('.help-jquery')
                    .css('opacity', 0)
                    .slideDown('fast')
                    .animate(
                        { opacity: 1 },
                        { queue: false, duration: 'slow' }
                    );

                //$('.desired submit').click(function(){
                    //return false;
                //});
            },
            error: function() {
                console.log('Error: did not submit properly');
            },
            complete: function(e) {
                //$('.desired').unbind('submit');
                //e.preventDefault();
                //return false;
            }
        });


    },
    success: function(error,element){
    },
    highlight: function(error){
        // This empty function needs to be here for this to work
    }

});

Answer 1

Вы на правильном пути с unbind(), это решает половину вашей проблемы, потому что оно эффективно подавляет проверку при отправке формы.

Чтобы решить вторую половину, вам нужно только стерилизовать формуsubmit событие после отмены привязки, путем регистрации соответствующего обработчика:

$(form).unbind("submit").submit(function() {
    return false;
});

Answer 2

Используйте логическую переменную, например:

var didValidate = false;

if(!didValidate) {
    jQuery('.desired').validate({
        //... your code here
    });
}

В вашей функции успеха AJAX установите didValidate в true.

Answer 3

Используйте метод .destroy().

Этот вопрос и ответы на него довольно старые.Таким образом, с того времени разработчик добавил метод .destroy() для отсоединения плагина валидации от формы.

Уничтожает этот экземпляр валидатора, освобождая ресурсы и отменяя регистрацию событий.

// Initialize the validation plugin on your form

var validator = $("#myform").validate();

// Remove validation from your form

validator.destroy();

// After this point `#myform` is back to its original state without validation.

https://jqueryvalidation.org/Validator.destroy/

---

Чтобы остановить несколько представлений, отключите кнопку submit в функции submitHandler плагина. (submitHandler срабатывает только тогда, когда форма действительна, и вы уже нажали кнопку отправки.)

submitHandler: function(form) {
    // validation & submit success, so disable submit button
    $("#yourSubmitButton").prop('disabled', true);
    // your ajax code here
    return false;
}

Answer 4

Вероятно, самое простое - добавить что-то подобное в ваш подчиненный обработчик

submitHandler: function(form) {

    var $ = jQuery;
    if ( $.data(form, "submit") ) > "" return false;
    $.data(form, "submit", "in progress");
    //  .. the rest of your handler
}

Если вы хотите разрешить повторную отправку формы позже, удалите .data () в случае успеха.

Answer 5

Использовать пространства имен событий:

Имя, следующее за '.'давайте нацелимся на обработчики более конкретно.

Это вверху обработчика отправки:

$(form).bind('submit.temp_submit_hold', function(e){
    e.preventDefault();
    e.stopPropagation(); //added this in case the plugin's handler func uses bubbling
    return false;
} );

Это вверху полного обратного вызова для вызова ajax:

$('.desired').unbind('submit.temp_submit_hold');

Немного больше объяснений после просмотра ваших комментариев в полном объеме.Время предотвращать дефолт - сразу после того, как ваш обработчик onsubmit начинает работать.По завершении это когда вы хотите включить его снова.Таким образом, мы связываем функцию, которая останавливает ее с помощью параметра предотвращать дефолт, а затем связываем ее, чтобы переключать поведение.Я также добавил stopPropagation на случай, если плагин использует делегирование / всплывающее окно.

Answer 6

Имейте переменную, равную 1 или 0. Прежде чем выполнять какую-либо проверку, убедитесь, что переменная равна 0. Если это не 0, ничего не делайте. Если это так, продолжайте. После того, как проверка пройдена, установите для переменной значение 1, чтобы проверка не могла повториться.