表单验证引导程序 4

Posted 2023-05-09

【中文标题】表单验证引导程序 4

【英文标题】：form validation bootstrap 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); 
)(); 

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

【参考方案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);
  
);

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

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

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