在这种情况下，我怎么能停止表单提交？答案

【问题标题】：How could I stop a form submit in this case?在这种情况下，我怎么能停止表单提交？
【发布时间】：2018-05-09 20:39:40
【问题描述】：

我的目的是在提交完成之前检查一些条件或停止它并在该条件的结果为假时显示警报。我需要使用 POST 询问在另一个 PHP 文档中本地化的函数。我要展示的下一个案例，当“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;
            }              
        });
});

如您所见，我的目标是在“结果！= 1”时停止提交并显示警报或在所有条件都正常时进行提交。

有什么想法吗？

谢谢。

【问题讨论】：

你能显示console.log(result)的值吗？
考虑使用jqueryvalidation.org
console.lo(result) 值是1还是0，我查了好几遍了。
@F.Reyes 你试过回答吗？它会工作的。

标签： javascript php jquery forms

【解决方案1】：

您遇到的问题是您无法从异步函数返回任何内容 - 您的 AJAX 请求就是这样。

要解决这个问题，您需要使用preventDefault() 停止通过jQuery 提交表单事件，然后如果AJAX 请求返回有效结果，则引发另一个native 提交事件。第二个提交事件将不会由 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() 不是异步函数。如果是，那么您也需要在那里使用回调模式。

【讨论】：

嗨，罗里。它只是尝试过，它很好地停止了提交并显示警报，但是当结果 === 1 时提交不起作用。即使使用 this.submit() （它会导致错误）或 $(this).submit( ) 或 $('idForm).submit().
你确定result 是一个整数吗？试试result == "1"
是的，它是一个整数，但不存在问题。当我在所有验证后再次调用提交时，它会创建一个无限循环（提交事件调用相同的提交）。

【解决方案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，但 promise 模拟了这一点，请注意此示例在 IE 中不起作用）

【讨论】：

【解决方案3】：

解决问题的步骤：

在实际提交表单时，只需阻止事件并进行其余调用。
根据响应再次通过设置allowSubmit标志动态重新提交。
因为在第二次提交时设置了标志，所以它不会阻止表单提交。重置 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
        }
    });
})();

【讨论】：