在Ajax提交之前进行Bootstrap 4客户端验证

Question

我有一个表格（请参阅下面的表格）。我们在项目上遵循引导程序4，因此，我希望尽可能多地重用，并且不要在不需要的地方编写自己的代码。

当用户按下Submit按钮时，我执行AJAX发布请求，作为响应，我获得了一些信息的JSON对象。基于该响应，我必须执行一些逻辑。

<form name="signin" class="js-form-submit needs-validation" action="/signin">
  <div class="form-group">
    <label for="username">User Name</label>
    <input class="form-control" id="username" name="username" autofocus>
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" class="form-control" id="password" name="password" >
  </div>
  <button type="submit" class="btn btn-primary mb-2">Submit/button>
</form>

现在，我要进行客户端验证（如果可能，我更喜欢使用引导程序）。他们有一个示例，但它适用于普通提交，但不适用于AJAX，我很好奇如何在AJAX调用之前执行bootstrap 4客户端验证？

// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap 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);
})();

https://getbootstrap.com/docs/4.0/components/forms/#custom-styles

有人可以指出我的方向还是提供一段代码。

谢谢。

Answer 1

我找到了一个使用 JQuery 的解决方案。试试这个代码，

$('your-form-id').submit(function (event) {
    event.preventDefault();
    if ($('your-form-id')[0].checkValidity() === false) {
        event.stopPropagation();
    } else {
        //do your ajax submition here
    }
    $('your-form-id').addClass('was-validated');
});