проверка формы начальной загрузки 4 - PullRequest
Новая
       7

проверка формы начальной загрузки 4

0 голосов
/ 28 февраля 2019

Когда я заканчиваю проверять форму, я хочу показать сообщение об успешном завершении, но оно автоматически обновляется и не дает времени увидеть что-либо.Я использую загрузчик 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 Ответ

0 голосов
/ 28 февраля 2019

Существует два сценария:

  1. Вы можете отобразить сообщение об успешном завершении до обновления страницы
  2. Вы можете отобразить сообщение об успешном завершении после отправки формы (после обновления страницы)

Для первого сценария все, что вам нужно сделать, это отменить событие 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);
  }
});

Вы все еще можете улучшить этот код, очистив тайм-аут и так далее ...

Второй сценарий потребует дополнительной логики, например, во время проверки вы можете сохранить некоторые данные, напримерв хранилище сеансов и во время загрузки следующей страницы на основе этой информации визуализируйте сообщение и спрячьте его также во время ожидания.

Дайте мне знать, какой вам нужен, если второй, я могу дать вам больше подсказок.

...