仅在表单验证时触发 ajax 调用答案

【问题标题】：fire ajax call only if the form validates仅在表单验证时触发 ajax 调用
【发布时间】：2020-05-29 15:56:55
【问题描述】：

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

【问题讨论】：

您对表单元素是否有任何限制，例如“required”、“min”、“max”等？也不是novalidate 在错误的地方（应该作为<form> 属性）
是的，我有一些具有 min 属性的字段

标签： javascript ajax forms validation

【解决方案1】：

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

【讨论】：

谢谢，我想试试。