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

Question

I have this api that call some ajax and run asynchronous and i can't submit the form until she gives me an response. So what i did was submit by jquery event just when this api gives me a response.

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

This is the api code. When i get a response i submit the form, the thing is that i am using bootstrap validation, and isn't working anymore, it don't call the validation.

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

So, this is the validation code. As i said when i submit by jquery it calls this validation, but it simply don't get there.

There is a way to fix this? I also tried to use the submit event of the 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();
  });
});

But the $(this).checkValidity() also don't work and don't stop the submit.

Obs: The submission button it's calling the function that call the api.

Answer 1

I get it, i used the jquery method, but instead of use $(this) , i used form = $(this)[0] and then just replaced the values on the code.

Link where I found the answer: Bootstrap 4 Form Validation - Custom styling not working after checkValidity() call