Javascript 表单验证引导程序4

当我完成表单验证时，我希望显示一条成功消息，但它会自动刷新，并且没有时间查看任何内容。 我使用的是Bootstrap4.1.3

这是我的部分代码：

<div class="container">
<div class="py-5 text-center">
    <h2>Inscription 2019</h2>
    <div id="alertOk" class="alert alert-success d-none"  role="alert">
      Success!
    </div>
</div>

<div class="col-md-12 order-md-1">
  <h5 class="mb-3">* Especialidad</h5>
  <form id="inscriptoForm" class="needs-validation" novalidate>
    <div class="row">
      <div class="col-md-4 mb-3">
        <label for="firstName">* Name</label>
        <input type="text" class="form-control" id="name" name="name" required>
        <div class="invalid-feedback">
          Name is required.
        </div>
      </div>
</div>

铭文2019
成功！
*特别是爸爸
*名字
名称是必需的。

（功能（）{
"严格使用",；
addEventListener（'load'，function（））{
var forms=document.getElementsByClassName（'needs-validation'）；
var validation=Array.prototype.filter.call（表单，函数（表单）{
表单.addEventListener（'submit'，函数（事件）{
if（form.checkValidity（）==false）{
event.preventDefault（）；
event.stopPropagation（）；
}否则{
$（'#alertOk'）.removeClass（'d-none'）；//删除类以显示消息。
}   
}，假）；
});
}，假）；
})(); 

验证有效，但当您单击提交时，它会很快显示消息，无法读取。

---

返回空白表格。

有两种情况：

您可以在刷新页面之前显示成功消息

您可以在发送表单后显示成功消息（第页之后） 刷新）

对于第一个场景，您所要做的就是取消对submit事件的影响

const TIME_FOR_ALERT_OK_MESSAGE = 2000; // two seconds

form.addEventListener('submit', function(event) {
  event.preventDefault();
  event.stopPropagation();

  if (form.checkValidity()) {
    $('#alertOk').removeClass('d-none'); //remove class to show message.

    setTimeout(() => {
      this.submit();
    }, TIME_FOR_ALERT_OK_MESSAGE);
  }
});

您仍然可以通过清除超时等来改进此代码

第二种情况需要更多的逻辑，在验证期间，您可以将一些数据存储在会话存储中，在下一页加载期间，根据这些信息呈现消息并在超时时隐藏它

让我知道你需要哪一个，如果第二个我可以给你更多的提示

const TIME_FOR_ALERT_OK_MESSAGE = 2000; // two seconds

form.addEventListener('submit', function(event) {
  event.preventDefault();
  event.stopPropagation();

  if (form.checkValidity()) {
    $('#alertOk').removeClass('d-none'); //remove class to show message.

    setTimeout(() => {
      this.submit();
    }, TIME_FOR_ALERT_OK_MESSAGE);
  }
});