onblur e validação

[Rodrigo Bruno de Oliveira 0]

Bom dia!

Sou novo na área de desenvolvimento web, e estou tendo alguns problemas, tenho um calpo que valida se um CPF é válido ou não, esse mesmo campo tem uma mascara de caracteres e só permite que os usuários digitem números, até ai está tudo funcionando, porem quando o usuário troca de campo ele já deve fazer a validação automaticamente.

Não estou conseguindo fazer funcionar a troca de campo corretamente e a validação não mostra o resultado corretamente.

 

Esse é o código do campo

            <input class="form-box-input" type="text" id="cpf" placeholder="CPF" maxlength="14" onkeypress="return SomenteNumero(event) && formatar('###.###.###-##', this)" onblur="TestaCPF()" required>

E esse é o meu JavaScript.

function TestaCPF(strCPF) {
    var Soma;
    var Resto;
    Soma = 0;

    if (strCPF == "00000000000") return false;

    for (i = 1; i <= 9; i++) Soma = Soma + parseInt(strCPF.substring(i - 1, i)) * (11 - i);
    Resto = (Soma * 10) % 11;

    if ((Resto == 10) || (Resto == 11)) Resto = 0;
    if (Resto != parseInt(strCPF.substring(9, 10))) return false;

    Soma = 0;
    for (i = 1; i <= 10; i++) Soma = Soma + parseInt(strCPF.substring(i - 1, i)) * (12 - i);
    Resto = (Soma * 10) % 11;

    if ((Resto == 10) || (Resto == 11)) Resto = 0;
    if (Resto != parseInt(strCPF.substring(10, 11))) return false;
    return true;
}

var cpf = document.querySelector("#cpf");

var botao = document.querySelector(".form-button");

botao.addEventListener("click", function() {
    if (TestaCPF(cpf.value.replace(/\./g, "").replace("-", ""))) {
        alert("CPF válido");
        console.log("valido" + cpf);
        document.fvalida.submit();
    } else {
        alert("CPF inválido");
        console.log("invalido");
    }
});

Se alguém puder me ajudar eu ficaria eternamente grato =D

[Rodrigo Bruno de Oliveira 0]

Fiz algumas alterações no JavaScript.

function TestaCPF(strCPF) {
    var Soma;
    var Resto;
    Soma = 0;

    if (strCPF == "00000000000") return false;

    for (i = 1; i <= 9; i++) Soma = Soma + parseInt(strCPF.substring(i - 1, i)) * (11 - i);
    Resto = (Soma * 10) % 11;

    if ((Resto == 10) || (Resto == 11)) Resto = 0;
    if (Resto != parseInt(strCPF.substring(9, 10))) return false;

    Soma = 0;
    for (i = 1; i <= 10; i++) Soma = Soma + parseInt(strCPF.substring(i - 1, i)) * (12 - i);
    Resto = (Soma * 10) % 11;

    if ((Resto == 10) || (Resto == 11)) Resto = 0;
    if (Resto != parseInt(strCPF.substring(10, 11))) return false;
    return true;
}

var cpf = document.querySelector("#cpf");

var botao = document.querySelector(".form-button");

botao.addEventListener("click", function() {
    if (TestaCPF(cpf.value.replace(/\./g, "").replace("-", ""))) {
        alert("CPF válido");
        console.log("valido" + cpf);
    } else if (cpf !== null || cpf !== undefined){
        alert("CPF inválido");
        console.log("invalido");
    } else {
        console.log("oooooo");
    }
});

A ideia é que os resultados null e undefined caiam no else, porem sempre que o resultado é um CPF não valido ou um valor null ou undefined eles caem no else if.

[Rodrigo Bruno de Oliveira 0]

Consegui resolver o if do final com isso.

    if (TestaCPF(cpf.value.replace(/\./g, "").replace("-", ""))) {
        console.log("valido");
    } else if (cpf.value == "") {
        console.log("vazio");
    } else {
        console.log("inválido");
    }

Agora falta eu conseguir fazer funcionar por onblur essa parte do código.

botao.addEventListener("click", function() {

[Rodrigo Bruno de Oliveira 0]

Resolvido