Как я могу остановить отправку формы в этом случае?

Question

Мое намерение состоит в том, чтобы проверить некоторые условия перед выполнением отправки или остановить его и показать предупреждение, если результаты этого условия ложные. Мне нужно задать функцию, локализованную в другом документе PHP, используя POST. В следующем случае, который я собираюсь показать, предупреждение отображается правильно, когда «result! = 1», но когда я проверяю противоположный случай «result == 1», отправка не работает:

$('body').on("submit","#idForm",function(event) {
        event.preventDefault();
        $.post( 'php_file_rute.php', {action:'functionName'})
            .done(function(result) {
                if (result == 1) {
                    if(functionNameInSameJSPage()){
                        return true;
                    }else{
                        return false;
                    }
                } else {
                    alert('error');
                    return false;
                }              
            });
    });

Я пытался по-другому, помещая event.preventDefault после каждого «Return false», но когда «result! = 1», он показывает предупреждение, но в любом случае выполняет отправку. Это происходит в любых условиях (отправка не прекращается).

$('body').on("submit","#formProyecto",function(event) {

    $.post( 'php_file_rute.php', {action:'functionName'})
        .done(function(result) {
            if (result == 1) {
                if(functionNameInSameJSPage()){
                    return true;
                }else{
                    return false;
                    event.preventDefault();
                }
            } else {
                alert("error");
                event.preventDefault();
                return false;
            }              
        });
});

Как видите, моя цель - остановить отправку, если "result! = 1", и показать предупреждение или выполнить отправку, если все условия в порядке.

Есть идеи?

Спасибо.

Answer 1

Шаги для решения проблемы:

1. При фактической отправке формы просто заблокируйте событие и сделайте остальной вызов.
2. На основе ответа снова динамически повторно отправьте, установив флаг allowSubmit.
3. Поскольку при второй отправке установлен флаг, это не мешает отправке формы. Сбросьте флаг allowSubmit.

(function() {
    var allowSubmit = false;
    $('body').on("submit", "#idForm", function(event) {
        var that = this;
        if (!allowSubmit) {
            event.preventDefault();
            $.post('php_file_rute.php', {
                action: 'functionName'
            }).done(function(result) {
                if (result == 1) {
                    if (functionNameInSameJSPage()) {
                        allowSubmit = true; // set the flag so next submit will not go though this flow
                        that.submit(); // dynamically trigger submit
                    }
                } else {
                    alert('error');
                }
            });
        } else {
            allowSubmit = false; // reset the flag
        }
    });
})();

Answer 2

Это немного сложнее, но вы можете заставить его работать, выполнив:

$('body').on("submit","#idForm",function(event) {
        event.preventDefault();
        $.post( 'php_file_rute.php', {action:'functionName'})
            .done(function(result) {
                if (result == 1) {
                    if(functionNameInSameJSPage()){
                        $('#idForm').trigger("submit.force"); //Trigger submit again but under a different name
                    }
                } else {
                    alert('error');
                }              
            });
    });
    $('body').on("submit.force","#idForm", function () { return true; }); //Passthrough

Идея состоит в том, чтобы перезапустить событие, но убедитесь, что вы не вызываете тот же обработчик.

Есть подтверждение концепции на https://jsfiddle.net/2kbmcpa4/ (фактического Ajax не происходит, но обещание имитирует это, обратите внимание, что этот пример не будет работать в IE)

Answer 3

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

Чтобы решить эту проблему, вам нужно использовать preventDefault(), чтобы остановить событие отправки формы через jQuery, а затем вызвать другое событие native submit, если запрос AJAX возвращает действительный результат. Это второе событие отправки не будет обработано jQuery и отправит форму, как вам требуется. Попробуйте это:

$(document).on("submit", "#idForm", function(e) {
  e.preventDefault();
  var form = this;

  $.post('php_file_rute.php', {
    action: 'functionName'
  }).done(function(result) {
    if (result === 1) {
      if (functionNameInSameJSPage()) {
        form.submit();
      }
    } else {
      alert('error');
    }
  });
});

Предполагается, что functionNameInSameJSPage() не является асинхронной функцией. Если это так, то вам также понадобится использовать шаблон обратного вызова.