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的Submit事件：

$(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 Form Validation - Custom styling not working after checkValidity() call

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

1 个答案: