从 jquery 提交时，引导表单验证不起作用答案

【问题标题】：bootstrap form validation don't work when submit from jquery从 jquery 提交时，引导表单验证不起作用
【发布时间】：2020-10-07 04:18:33
【问题描述】：

我有这个 api 调用一些 ajax 并异步运行，在她给我回复之前我无法提交表单。所以我所做的只是当这个 api 给我一个响应时通过 jquery 事件提交。

    function getCardToken(card_num, cvv, month_exp, year_exp){
    PagSeguroDirectPayment.createCardToken({
        cardNumber: card_num, // Número do cartão de crédito
        brand: brand, // Bandeira do cartão
        cvv: cvv, // CVV do cartão
        expirationMonth: month_exp, // Mês da expiração do cartão
        expirationYear: year_exp, // Ano da expiração do cartão, é necessário os 4 dígitos.
        success: function(response) {
            $("#card-token").val(response['card']['token']);
            var names_id = new Array("number", "cvv", "expiration");
            console.log('si');
            $("#pagamento-invalido").hide();
            for (var i = 0; i < names_id.length; i++){
                $("#cc-"+names_id[i]).addClass("is-valid");
                $("#cc-"+names_id[i]).removeClass("is-invalid");
                $("#cc-"+names_id[i]).siblings('.invalid-feedback').hide();
            }
            $("form").trigger("submit");
        },
        error: function(response) {
            console.log('no');
            var names_id = new Array("number", "cvv", "expiration");
            
            $("#pagamento-invalido").show();
            for (var i = 0; i < names_id.length; i++){
                $("#cc-"+names_id[i]).addClass("is-invalid");
                $("#cc-"+names_id[i]).removeClass("is-valid");
                $("#cc-"+names_id[i]).siblings('.invalid-feedback').show();
            }
            $("form").trigger("submit");
            // $("form").submit();
        },
      });
}

这是 api 代码。当我收到回复时，我提交了表单，问题是我正在使用引导验证，并且不再工作，它不会调用验证。

    (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
    Array.prototype.filter.call(forms, function (form) {
      form.addEventListener('submit', function (event) {
        $("#cpf").trigger("blur");

        var cpf_invalid = document.getElementById("cpf").classList.contains("is-invalid");
        var cep_invalid = document.getElementById("cep").classList.contains("is-invalid")

        if (form.checkValidity() === false | cpf_invalid | cep_invalid) {
          $("#cep").trigger("blur");
          event.preventDefault()
          event.stopPropagation()
        }

        else if($("#card-token").val() === "" | $("#sender-hash") === ""){
          
          event.preventDefault()
          event.stopPropagation()
        }
        console.log($("#card-token").val())
        event.preventDefault()
        event.stopPropagation()
        form.classList.add('was-validated');
      }, false)
    })

  }, false)
}());

所以，这是验证码。正如我所说，当我通过 jquery 提交时，它会调用此验证，但它根本无法到达那里。

有办法解决这个问题吗？我也尝试使用jquery的提交事件：

$(document).ready(function() {
  $("form").submit(function(e){
    $("#cpf").trigger("blur");

    var cpf_invalid = document.getElementById("cpf").classList.contains("is-invalid");
    var cep_invalid = document.getElementById("cep").classList.contains("is-invalid")
    console.log($(this).checkValidity())
    if ($(this).checkValidity() === false | cpf_invalid | cep_invalid) {
      $("#cep").trigger("blur");
      e.preventDefault()
    }

    else if($("#card-token").val() === "" | $("#sender-hash") === ""){
      e.preventDefault()
    }
    $(this).addClass('was-validated');
    e.preventDefault();
  });
});

但是$(this).checkValidity() 也不起作用并且不要停止提交。

Obs：提交按钮，它正在调用调用api的函数。

【问题讨论】：

标签： javascript jquery twitter-bootstrap

【解决方案1】：

我明白了，我使用了 jquery 方法，但我没有使用$(this)，而是使用了form = $(this)[0]，然后只是替换了代码上的值。

我找到答案的链接： Bootstrap 4 Form Validation - Custom styling not working after checkValidity() call

【讨论】：