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

Question

我有一个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的函数。

Answer 1

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

我找到答案的链接：Bootstrap 4表单验证-checkValidaty((调用后自定义样式不起作用