onblur e validação

 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