[Dúvida] CPF NÃO FICA VÁLIDO | JavaScript: validando formulários

2
respostas

Referente ao curso JavaScript: validando formulários, no capítulo Comunicando ao usuário e atividade Imprimindo mensagens

por JOAO PAULO REIS SANTOS

| 42.2k xp | 9 posts

Quando eu digito o cpf válido ele fica como invalido, no ** validityState** consta que o tipo de erro patternMismatch está como true. fiz aquele teste que foi realizado em aulas passadas para ver se o cpf existe ou não existe..

if(validaNumerosRepetidos(cpf)||validaPrimeiroDigito(cpf)||validaSegundoDigito(cpf)){
        console.log('não existe')
    }
    else{
        console.log('existe')
    }

E o que acontece é que o teste diz que o cpf existe mas o patternMismatch fica como true sendo assim msg de erro Por favor, preencha um CPF válido.

Codigo

valida-cpf

export default function ehUmCpf(campo){    
    const cpf = campo.value.replace(/\.|-/g,"");
    if(validaNumerosRepetidos(cpf)||validaPrimeiroDigito(cpf)||validaSegundoDigito(cpf)){
        console.log('não existe')
        campo.setCustomValidity(' ');
    }else{
        console.log('existe')
    }



}
function validaNumerosRepetidos(cpf){
    const numerosRepetidos = [
        '11111111111',
        '22222222222',
        '33333333333',
        '44444444444',
        '55555555555',
        '66666666666',
        '77777777777',
        '88888888888',
        '99999999999',
    ]
    return numerosRepetidos.includes(cpf)
}

function validaPrimeiroDigito(cpf){
    let soma = 0;
    let multiplicador = 10;
    for(let x = 0; x < 9; x++){
        soma += cpf[x] * multiplicador;
        multiplicador--;

    }
    soma = (soma*10)%11;
    if(soma == 10 || soma == 11){
        soma = 0;
    }
    return soma !=cpf[9];
}
function validaSegundoDigito(cpf){
    let soma = 0;
    let multiplicador = 11;
    for(let x = 0; x < 10; x++){
        soma += cpf[x] * multiplicador;
        multiplicador--;

    }
    soma = (soma*10)%11;
    if(soma == 10 || soma == 11){
        soma = 0;
    }
    return soma !=cpf[10];
}

2 respostas

por JOAO PAULO REIS SANTOS

| 42.2k xp | 9 posts

01/05/2023

**CODIGO

Script.js**

import ehUmCpf from "./valida-cpf.js"
import ehMaiorDeIdade from "./valida-idade.js"

const camposFormulario = document.querySelectorAll("[required]")
camposFormulario.forEach((campo)=>{
    campo.addEventListener('blur',()=> verificaCampo(campo))
    campo.addEventListener('invalid',(e)=>{
        e.preventDefault()
    })
})

const tiposDeErros = [
        'valueMissing',
        'typeMismatch',
        'patternMismatch',
        'tooShort',
        'customError'
]

const mensagens = {
    nome: {
        valueMissing: "O campo de nome não pode estar vazio.",
        patternMismatch: "Por favor, preencha um nome válido.",
        tooShort: "Por favor, preencha um nome válido."
    },
    email: {
        valueMissing: "O campo de e-mail não pode estar vazio.",
        typeMismatch: "Por favor, preencha um email válido.",
        tooShort: "Por favor, preencha um e-mail válido."
    },
    rg: {
        valueMissing: "O campo de RG não pode estar vazio.",
        patternMismatch: "Por favor, preencha um RG válido.",
        tooShort: "O campo de RG não tem caractéres suficientes."
    },
    cpf: {
        valueMissing: 'O campo de CPF não pode estar vazio.',
        patternMismatch: "Por favor, preencha um CPF válido.",
        customError: "O CPF digitado não existe.",
        tooShort: "O campo de CPF não tem caractéres suficientes."
    },
    aniversario: {
        valueMissing: 'O campo de data de nascimento não pode estar vazio.',
        customError: 'Você deve ser maior que 18 anos para se cadastrar.'
    },
    termos: {
        valueMissing: 'Você deve aceitar nossos termos antes de continuar.',
    }
}


function verificaCampo(campo){
    let mensagem = '';

    if(campo.name == "cpf" && campo.value.length >= 11){

        ehUmCpf(campo);
    }
    if (campo.name == "aniversario" && campo.value != "") {
        ehMaiorDeIdade(campo);
    }
    tiposDeErros.forEach(erro=>{
        if(campo.validity[erro]){
            mensagem = mensagens[campo.name][erro];
            console.log(mensagem)
        }
    })
    const mensagemErro = campo.parentNode.querySelector('.mensagem-erro');
    const validadorDeInput = campo.checkValidity();
    if(!validadorDeInput){
        mensagemErro.textContent = mensagem;
    }else{
        mensagemErro.textContent = "";
    }

    console.log(campo.validity)
}

por NATHALIA QUEIROZ

| 2386.9k xp | 5579 posts

Alura Scuba Team Suporte Educacional

02/05/2023

Oii, Dev! Tudo bem?

Agradeço por compartilhar o seu código.

Pelo o que pude observar, o erro pode estar ocorrendo na função ehUmCpf dentro de valida-cpf.js. Você está usando o método setCustomValidity para definir a mensagem de erro, mas está passando um espaço em branco como parâmetro quando o CPF é válido.

Uma solução possível é trocar a linha campo.setCustomValidity(' '); para campo.setCustomValidity('');, o código ficará assim:

export default function ehUmCpf(campo){    
    const cpf = campo.value.replace(/\.|-/g,"");
    if(validaNumerosRepetidos(cpf)||validaPrimeiroDigito(cpf)||validaSegundoDigito(cpf)){
        console.log('não existe')
        campo.setCustomValidity('');
    }else{
        console.log('existe')
    }

Teste em seu código e observe se ocorre como esperado. Qualquer dúvida, estarei à disposição para te ajudar.

Bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!