Question

我有一张表格（见下文）。我们在一个项目上遵循bootstrap 4，因此我更喜欢尽可能多地重复使用，而不是在不需要的地方编写我自己的代码。

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

// 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);
})();

现在我想进行客户端验证（如果可能的话，我更喜欢使用bootstrap）。他们有一个例子，但是它可以正常提交但不适用于AJAX，我很好奇如何在我的AJAX调用之前执行bootstrap 4客户端验证？

function Request(){

var _req1_successful = false;
var _req2_successful = false;
var _req3_successful = false;

_req1_successful = RequestCall(**params**)
_req2_successful = RequestCall(**params**)
_req3_successful = RequestCall(**params**)

**Carry out results etc...**
}

function RequestCall(**Params**) {
 $.ajax({"URL",
        contentType: "application/json; charset=utf-8",
        type: "POST",
        data: "{**Params**}",
        success: function(data) {
           return true 
        },
        error: function(x, e) {
            return 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');
});

Answer 2

将ajax请求添加到else条件语句中，即可完成操作。

// 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();
            }else {
               //do your ajax submition here
            }
            form.classList.add('was-validated');
          }, false);
        });
      }, false);
    })();

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

2 个答案: