Двойная подача формы, создающая проблему с проверкой

Question

Двойная подача формы, создающая проблему с проверкой

Мои формы имеют двойное представление.

Шаг 1. Отправка на мой определенный URL с AJAX

Шаг 2. позволить форме вести себя как поведение по умолчанию.

Выпуск:

Я не предоставляю никакой проверки с моим сценарием. я не использую какой-либо плагин, как JQuery проверки.

при отправке формы работает проверка jquery (что, если форма уже есть), но сразу после завершения ajax разрешается отправить форму.

Этого не должно случиться, если есть проверка.

Я предоставляю этот сценарий своему клиенту, чтобы получить отправленную информацию о форме на моей платформе.

Вот почему я не знаю, какой клиент проверки будет использовать, или если они не будут использовать, или они будут использовать любой плагин для проверки.

я просто хочу остановить отправку, если есть ошибка проверки..

Я знаю, что есть проблема с

$("form[data-track=MySubmit]").off("submit");
$("form[data-track=MySubmit]").trigger( "submit" );
return true;

Часть сценария:

$("form[data-track=MySubmit]").on("submit", function(event) {   
    var formInputData = $(this).serialize();
    $.ajax({
        url: "/insertdata",
        type: "post",
        data: formInputData
        dataType: 'json',
        success: function(responce) {

            $("form[data-track=MySubmit]").off("submit");
            $("form[data-track=MySubmit]").trigger( "submit" );
            return true;
        }
    });
});

больше информации:

это сценарий двойной отправки... означает, что сначала он отправит форму по одному URL-адресу, который не находится в действии формы, затем он позволит форме выполнять поведение по умолчанию, например, I-й шаг, чтобы сохранить информацию, используя ajax на моем URL-адресе, а затем на 2-м шаге. если у формы есть действие для отправки формы, сделайте это, или если форма имеет ajax-отправку, то выполните это или другое поведение формы при отправке.

Обновить:

Есть 2 человека

я
Мой клиент

Я предоставляю свой сценарий отправки формы моему клиенту, у которого есть своя собственная форма и собственный jquery/javascript.

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

Но Я НЕ ПРЕДОСТАВЛЯЮ НИКАКОГО ПИСАНИЯ ДЛЯ ПРОВЕРКИ..

у них есть своя валидация, может быть любой плагин или пользовательский jquery/javascript.

Моя проблема:

Как я могу остановить отправку формы, если есть проверка из собственного jQuery/Javascript их формы?

3

javascript jquery ajax forms double-submit-problem

Источник

user1868277 18 апр '17 в 09:43

7 ответов

Другие вопросы по тегам javascript jquery ajax forms double-submit-problem

user1439176 20 апр '17 в 11:26 2017-04-20 11:26 · Answer 1 · 2017-04-20 11:26

Внутри Ajax Success снова проверьте правильность формы

if($("form[data-track=MySubmit]").valid()){
    // the form is valid, do something
    $("form[data-track=MySubmit]").off("submit");
    $("form[data-track=MySubmit]").trigger( "submit" );
} else{
    // the form is invalid
}

2

Источник

user1439176 20 апр '17 в 11:26

user1759084 27 апр '17 в 11:13 2017-04-27 11:13 · Answer 2 · 2017-04-27 11:13

Есть скрытая кнопка с "по умолчанию" отправить. Когда вы закончите обработку ajax с использованием jQuery, вызовите событие click на кнопке.

0

Источник

user1759084 27 апр '17 в 11:13

user6433611 18 апр '17 в 10:40 2017-04-18 10:40 · Answer 3 · 2017-04-18 10:40

Ты можешь попробовать

event.preventDefault();

Как это

$("form[data-track=MySubmit]").on("submit", function(event) {   
var formInputData = $(this).serialize();
$.ajax({
    url: "/insertdata",
    type: "post",
    crossDomain: true,
    data: formInputData
    dataType: 'json',
    success: function(responce) {

        $("form[data-track=MySubmit]").off("submit");
        $("form[data-track=MySubmit]").trigger( "submit" );

    }
});
event.preventDefault();
});

user4708866 26 апр '17 в 16:19 2017-04-26 16:19 · Answer 4 · 2017-04-26 16:19

Из того, что я понимаю, вы хотите отправить свою форму с AJAX на URL-адрес, где происходит проверка и, если она успешно возвращается, отправьте ее во второй раз в действие по умолчанию.

Если это так, то ваш код почти работает, но вам нужно сделать две вещи:

Положил event.preventDefault(); в вашем обработчике отправки, чтобы предотвратить в начале действие формы по умолчанию, потому что мы хотим, чтобы мы запускали его только после успешного возврата AJAX.
Если AJAX успешно возвращается, и вы видите, что ваша форма не отправлена во второй раз, убедитесь, что в вашей форме нет кнопки отправки с именем "submit", потому что это скрыло бы действие отправки по умолчанию и $("form[data-track=MySubmit]").trigger( "submit" ); не будет работать! Переименуйте кнопку "Отправить" в "submitBtn" или как угодно.

Кстати, вы пропустили запятую после data: formInputData

user5913000 25 апр '17 в 12:22 2017-04-25 12:22 · Answer 5 · 2017-04-25 12:22

Вы можете попробовать вернуть false и event.preventDefault одновременно +. Вы можете изменить поведение кода, когда формы возвращают true.

dataCheck = false;
$("form[data-track=MySubmit]").on("submit", function(event) {
    if(dataCheck === false)
    {
        event.preventDefault();
        var formInputData = $(this).serialize();
        $.ajax({
            url: "/insertdata",
            type: "post",
            data: formInputData,
            dataType: 'json',
            success: function(responce) {
                dataCheck = true;
                $("form[data-track=MySubmit]").off("submit");
                $("form[data-track=MySubmit]").trigger( "submit" );
                return true;
            }
        });
        return false;
    }
});

user3340622 20 апр '17 в 11:27 2017-04-20 11:27 · Answer 6 · 2017-04-20 11:27

Вы можете использовать JQuery validate() метод для этого. мы можем передать функцию submitHandler, которая обрабатывает обработку отправки формы после того, как выяснилось, что форма свободна от проверок на стороне клиента.

submitHandler (по умолчанию: собственная форма отправки)
Тип: Function() Обратный вызов для обработки фактической отправки, когда форма действительна. Получает форму в качестве единственного аргумента. Заменяет отправку по умолчанию. Правильное место для отправки формы через Ajax после ее проверки.

Пример: отправляет форму через Ajax, когда она действительна.

$("#myform").validate({
    submitHandler: function(form) {
        $(form).ajaxSubmit();
    }
});

Вы можете попробовать это:

$("form[data-track=MySubmit]").validate({
    submitHandler: function(form) {
        var formInputData = $(form).serialize();

        //the default form submit behaviour
        $(form).submit();

        //form submit via ajax on custom url
        $.ajax({
            url: "/insertdata",
            type: "post",
            data: formInputData
            dataType: 'json',
            success: function(response) {
                console.log('form is submitted');
            }
        });
    }
});

user3178139 25 апр '17 в 12:18 2017-04-25 12:18 · Answer 7 · 2017-04-25 12:18

Попробуй это

для проверки вы можете использовать плагин JQuery Validation Engine здесь: https://github.com/posabsolute/jQuery-Validation-Engine

$("form[data-track=MySubmit]").submit(function(event) {  
    event.preventDefault();          /////////added    
    var formInputData = $(this).serialize();
    $.ajax({
        url: "/insertdata",
        type: "post",
        data: formInputData, //////missing comma
        dataType: 'json',
        success: function(responce) {
              $("form[data-track=MySubmit]").submit();
        }
    });
});