cnpj mask does not work

Asked

Viewed 25 times

0

I have a screen that is possible to consult Cpf and cnpj.. the mask for Cpf works, but pro cnpj I get an error saying that the function is not defined and as js is far from being my strong... I’m more lost than blind in shooting

Uncaught TypeError: cnpj.test is not a function
at valida_form_cnpj (score.html:163)
at HTMLInputElement.onblur (score.html:102)

HTML

<div class="tab-content justify-content-center" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
        <form action="" method="POST" name="form1">
            <div class="form-group">
                <label for="" class="w-100">CPF</label>
                <input type="text" class="form-control" name="cpf" id="cpf" maxlength="11" required onblur="valida_form_cpf()" />
                <small class="text-danger w-100 error-campo-cpf" id="small-cpf">CPF é obrigatório.</small>
            </div>
            <div class="form-group w-100 d-flex justify-content-end">
                <button class="btn-buscar"><i class="fas fa-search"></i> BUSCAR</button>
            </div>
        </form>
    </div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
        <form action="" method="POST" name="form2">
            <div class="form-group">
                <label for="" class="w-100">CNPJ</label>
                <input type="text" class="form-control" name="cnpj" id="cnpj" maxlength="14" required onblur="valida_form_cnpj()" />
                <small class="text-danger w-100 error-campo-cnpj" id="small-cnpj">CNPJ é obrigatório.</small>
            </div>
            <div class="form-group w-100 d-flex justify-content-end">
                <button class="btn-buscar"><i class="fas fa-search"></i> BUSCAR</button>
            </div>
        </form>
    </div>
</div>

JS

<script type="text/javascript" language="javascript">
    function valida_form_cpf() {
        if (document.getElementById("cpf").value == "") {
            var a = document.getElementById("small-cpf");
            a.classList.remove("error-campo-cpf")
            document.getElementById("cpf").focus();
            return false
        } else {
            var cpf = document.forms.form1.cpf.value;
            var cpfValido = /^(([0-9]{3}.[0-9]{3}.[0-9]{3}-[0-9]{2}))$/;
            if (cpfValido.test(cpf) == false) {

                cpf = cpf.replace(/\D/g, ""); //Remove tudo o que não é dígito

                if (cpf.length == 11) {
                    cpf = cpf.replace(/(\d{3})(\d)/, "$1.$2"); //Coloca um ponto entre o terceiro e o quarto dígitos
                    cpf = cpf.replace(/(\d{3})(\d)/, "$1.$2"); //Coloca um ponto entre o terceiro e o quarto dígitos
                    //de novo (para o segundo bloco de números)
                    cpf = cpf.replace(/(\d{3})(\d{1,2})$/, "$1-$2"); //Coloca um hífen entre o terceiro e o quarto dígitos

                    var valorValido = document.getElementById("cpf").value = cpf;
                }
            }
        }
    }

    function valida_form_cnpj() {
        if (document.getElementById("cnpj").value == "") {
            var a2 = document.getElementById("small-cnpj");
            a2.classList.remove("error-campo-cnpj")
            document.getElementById("cnpj").focus();
            return false
        } else {
            var cnpj = document.forms.form2.cnpj.value;
            var cnpjValido = /^(([0-9]{2}\.?[0-9]{3}\.?[0-9]{3}\/?[0-9]{4}\-?[0-9]{2}))$/;
            if (cnpj.test(cnpj) == false) {

                cnpj = cnpj.replace(/\D/g, ""); //Remove tudo o que não é dígito

                if (cnpj.length == 14) {
                    cnpj = cnpj.replace(/^(\d{2})(\d)/, "$1.$2"); //Coloca ponto entre o segundo e o terceiro dígitos
                    cnpj = cnpj.replace(/^(\d{2})\.(\d{3})(\d)/, "$1.$2.$3"); //Coloca ponto entre o quinto e o sexto dígitos
                    cnpj = cnpj.replace(/\.(\d{3})(\d)/, ".$1/$2"); //Coloca uma barra entre o oitavo e o nono dígitos
                    cnpj = cnpj.replace(/(\d{4})(\d)/, "$1-$2"); //Coloca um hífen depois do bloco de quatro dígitos

                    var cnpjvalorValido = document.getElementById("cnpj").value = cnpj;
                }
            }
        }
    }
</script>
  • Change "if (cnpj.test(cnpj) == false) {" by "if (cnpjValido.test(cnpj) == false) {", I just checked how it is in the part of the CPF, which you signaled works, not I checked the whole function.

  • @Jeanbarbosa, thanks for the remark. I hadn’t noticed. I switched here and stopped the issue of the function error, but the mask still didn’t work. then I was giving console.log in virtually every step of the process and saw that the process for the expression cnpjValido variable received the value of the regular expression. I found this question https://answall.com/questions/11045/express%C3%A3o-regular-to-validate-a-field-that-accepts-Cpf-or-cnpj and from the @Bacco answer I set up a new regular expression for cnpj /^(([0-9]{2}.[0-9]{3}.[0-9]{3}[\/]?[0-9]{4}-[0-9]{2}))$/; and it worked.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.