时间戳

首页 > 解决方案 > 仅在表单验证时触发 ajax 调用

javascript - 仅在表单验证时触发 ajax 调用

问题描述

我正在为通过 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">

标签： javascriptajaxformsvalidation

解决方案

您错过了添加needs-validationJavascript 代码所需的类和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>

推荐阅读