表单验证引导程序 4答案

【问题标题】：form validation bootstrap 4表单验证引导程序 4
【发布时间】：2019-07-21 19:24:24
【问题描述】：

当我完成验证表单时，我想显示一条成功消息，但它会自动刷新并且没有时间查看任何内容。我正在使用引导程序 4.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>

<script type='text/javascript'>
(function() {
  'use strict';
   window.addEventListener('load', function() {
    var forms = document.getElementsByClassName('needs-validation');
    var validation = Array.prototype.filter.call(forms, function(form) {
  form.addEventListener('submit', function(event) {
    if (form.checkValidity() === false) {
      event.preventDefault();
      event.stopPropagation();
    } else {
        $('#alertOk').removeClass('d-none'); //remove class to show message.
    }   
   }, false);
  });
 }, false); 
})();

验证有效，但是当您单击提交时，它会非常快速地显示消息并且无法阅读。返回空白表格。

【问题讨论】：

标签： javascript php jquery validation bootstrap-4.1.x

【解决方案1】：

有两种情况：

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

对于第一种情况，您所要做的就是解除提交事件的抖动。

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);
  }
});

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

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

如果第二个我可以给你更多提示，请告诉我你需要哪一个。

【讨论】：