我正在使用来自( https://github.com/1000hz/bootstrap-validator/blob/master/js/validator.js )的 Bootstrap 验证器,并且我试图在按下表单上的提交按钮时立即显示模式“加载”框。我通过执行以下操作实现了这一目标:
$('form').on('submit', function (event) {
showLoadingModal();
if (!event.isDefaultPrevented()) {
event.preventDefault();
submitForm(this);
} else {
hideLoadingModal();
}
});
但是我遇到了一个问题,即单击按钮和显示模式之间有一个很小的时间间隔(不到一秒)。我假设这种延迟是由于验证表单上的所有字段所花费的时间造成的,其中表单上有很多字段。
因此,这让我相信验证器“表单提交”是在我的代码之前执行的,我应该做一些不同的事情来调用 showLoadingModal()
编辑:
我在 js 中添加了一些日志记录,以了解发生了什么以及何时发生。我还将 showLoadingModal() 移至“单击按钮”事件中,以确保它在表单提交之前发生。这是我的消息的显示顺序:
点击了按钮
在显示模态之前
显示模态后
已提交表格
即将验证
<--模态现在出现-->
最佳答案
在提交表单之前设置 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)是执行表单发布导致页面重新加载的函数
一点想法,希望对你有帮助!
关于javascript - 提交表单时(验证之前)立即显示模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28195481/