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