javascript - ajax 提交前的 Bootstrap 4 客户端验证

Question

我有一个表格(见下文)。我们在一个项目中遵循 bootstrap 4，因此我更愿意尽可能多地重复使用，不要在不需要的地方编写自己的代码。

当用户按下提交按钮时，我执行 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>

现在我想进行客户端验证(如果可能的话，我更喜欢使用 Bootstrap )。他们有一个示例，但它适用于正常提交，但不适用于 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');
});