表单验证 bootstrap 4

Question

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

验证有效，但是当您单击提交时，它很快显示消息并且无法阅读。 Return 空白表格。

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

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

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

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

表单验证 bootstrap 4

form validation bootstrap 4

javascript

php

validation

jquery

bootstrap-4.1.x