提交表单时立即显示模式（验证前）答案

【问题标题】：Instantly display a modal when the form is submitted (before validation)提交表单时立即显示模式（验证前）
【发布时间】：2015-03-27 13:02:41
【问题描述】：

我正在使用来自 (https://github.com/1000hz/bootstrap-validator/blob/master/js/validator.js) 的引导验证器，并且我试图在表单上按下提交按钮时立即显示模式“加载”框。我通过执行以下操作实现了这一点：

$('form').on('submit', function (event) {
    showLoadingModal();
    if (!event.isDefaultPrevented()) {
        event.preventDefault();
        submitForm(this);
    } else {
        hideLoadingModal();
    }
});

但是我遇到了一个问题，即单击按钮和显示模式之间的时间间隔很小（不到一秒）。我假设这种延迟是由于验证表单上的所有字段所花费的时间造成的。

因此，这让我相信验证器“表单提交”是在我的代码之前执行的，我应该做一些不同的事情来调用 showLoadingModal()

编辑：

我在 js 中添加了一些日志记录，以了解发生的情况和时间。我还将 showLoadingModal() 移动到“单击按钮”事件中，以确保它在表单提交之前发生。这是我的消息显示的顺序：

点击按钮
显示模态之前
显示模态后
表单提交
即将验证

【问题讨论】：

好吧，您是否尝试在不触发验证的点击事件上显示它，以检查是否确实是需要时间的验证？
我已经在按钮按下的“mouseup”上进行了尝试，但延迟仍然存在，我不知道为什么，有什么想法吗？
您在模态对话框中使用什么？某个图书馆？
只是内置的 twitter 引导版本，即 $('#myModal').modal({ keyboard: false });
@MasterScrat 看看我的编辑，我尝试按照你的建议将其移动到点击事件中，但仍然有延迟

标签： javascript jquery html twitter-bootstrap validation

【解决方案1】：

在提交表单之前设置 300 毫秒的延迟

var event;
var formobj;
('form').on('submit', function (event) {
showLoadingModal();
event = event; //save event to be used later 
formobj = this;
setTimeout(function() 
{
     if (!event.isDefaultPrevented()) {
        event.preventDefault();
        submitForm(formobj );
      } else {
          hideLoadingModal();
      }
},300);
return false; //Prevent normal submission of the form so that the dialog box is visible
});

我假设 submitForm(this) 是执行表单发布导致页面重新加载的函数

只是一个想法，希望对你有帮助！

【讨论】：