提交表单时(验证前)立即显示模态

时间:2015-01-28 15:02:44

标签: javascript jquery html twitter-bootstrap validation

我正在使用(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()移动到“按钮单击”事件中,以确保它在表单提交之前发生。这是我的消息显示的顺序:

按钮点击了
在show modal之前 演出模式后 表格提交
即将验证 < - 现在出现模态 - >

1 个答案:

答案 0 :(得分:0)

在提交表单前设置延迟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)是执行表单发布导致页面重新加载的函数

只是一个想法,希望它有所帮助!