огонь ajax вызов, только если форма проверяет

Question

Я использую сценарий проверки формы bootstrap для моей формы, которая отправляется через ajax. Проблема в том, что даже если проверка не удалась, скрипт отправляется

это код проверки

(function() {
  'use strict';
  window.addEventListener('load', function() {
      // Get the forms we want to add validation styles to
      var forms = document.getElementsByClassName('needs-validation');
      // Loop over them and prevent submission
      var validation = Array.prototype.filter.call(forms, function(form) {
          form.addEventListener('submit', function(event) {
              if (form.checkValidity() === false) {
                  event.preventDefault();
                  event.stopPropagation();
              }
              form.classList.add('was-validated');
          }, false);
      });
  }, false);
})();

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

это код формы

<div class="form-group text-white needs-validation" novalidate>

        <form method="POST" id="rform" action="javascript:return">

Answer 1

Вы пропустили добавление класса needs-validation, который нужен вашему Javascript коду, и novalidate

<form method="POST" id="rform" action="" novalidate class="needs-validation">
  Name: <input type="text" name="name" required> <br> 
   ID: <input type="text" name="registration_id" min="3"> <br>
  <input type="submit" name="submit">
</form>

<script>
  (function() {
    'use strict';
    window.addEventListener('load', function() {
      // Get the forms we want to add validation styles to
      var forms = document.getElementsByClassName('needs-validation');
      // Loop over them and prevent submission
      var validation = Array.prototype.filter.call(forms, function(form) {
        form.addEventListener('submit', function(event) {
          if (form.checkValidity() === false) {
            event.preventDefault();
            event.stopPropagation();
          }
          form.classList.add('was-validated');
        }, false);
      });
    }, false);
  })();
</script>