Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

O CPF não aparece no console

Referente ao curso JavaScript: validando formulários, no capítulo Validando com JS e atividade Verificar CPF

por Thaynara Lima da Silva
| 82.5k xp | 59 posts

No video, a Monica coloca um CPF sem caracteres especiais e depois ela aperta avançar e o CPF que ela digitou aparece no console. Fiz a mesma coisa, mas o meu não aparece no console, apenas aparece o erro do HTML para os campos que deixei em branco. Eu também tentei preencher tudo para vê se o CPF finalmente aparece no console mas ele apenas recarregou a página (o comportamento normal do form). Além disso no meu console esta aparecendo o erro "Unchecked runtime.lastError: The message port closed before a response was received.", não sei se isso tem algo a ver.

No arquivo abrir-conta-form.html, no final do documento estou chamando o arquivo js: 

  <script src="../js/script.js" type="module"></script>

O meu valida-cef.js esta assim:

export default function ehUmCPF(campo) {
    const cpf = campo.value.replace(/\.|-/g, "");
    console.log(cpf);
}

e o script.js: 

import ehUmCPF from "./valida-cpf.js";
const camposDoFormulario = document.querySelectorAll("[required]");

camposDoFormulario.forEach((campo) => {
    campo.addEventListener("blur", verificaCampo(campo));
});

function verificaCampo(campo) {
    if (campo.name == "cpf" && campo.value.length >=11) {
        ehUmCPF(campo)
    }
}

Alguem poderia me ajudar?

4 respostas
por Luis Dias
| 2399.4k xp | 1806 posts
Developer (⌐■_■)

Oi, Thaynara


import ehUmCPF from "./valida-cpf.js";
const camposDoFormulario = document.querySelectorAll("[required]");

camposDoFormulario.forEach((campo) => {
    campo.addEventListener("blur", verificaCampo); // apenas a função sem os parênteses
});

function verificaCampo(e) {
    let campo = e.target; // elemento alvo
    if (campo.name == "cpf" && campo.value.length >=11) {
        ehUmCPF(campo)
    }
}
solução!
por Pedro Carvalho
| 32.7k xp | 3 posts

pelo que vi aqui, e posso estar errado, está faltando a "arrow function" e os parênteses no campo "addEventListener".

como deveria ficar: campo.addEventListener("blur", () => verificaCampo(campo));

por Luis Dias
| 2399.4k xp | 1806 posts
Developer (⌐■_■)

Ou, poderia usar o "this"


function verificaCampo() {
    let campo = this;
    if (campo.name == "cpf" && campo.value.length >=11) {
        ehUmCPF(campo)
    }
}

The JavaScript this Keyword

por Luis Dias
| 2399.4k xp | 1806 posts
Developer (⌐■_■)

Ou, como o Pedro falou

Tem q usar uma função no segundo parâmetro "element.addEventListener(event, function)"

import ehUmCPF from "./valida-cpf.js";
const camposDoFormulario = document.querySelectorAll("[required]");

camposDoFormulario.forEach((campo) => {
    campo.addEventListener("blur", () => verificaCampo(campo));
});

function verificaCampo(campo) {
    if (campo.name == "cpf" && campo.value.length >=11) {
        ehUmCPF(campo)
    }
}

HTML DOM Element addEventListener()