4
respostas

Não consigo fazer a validaçao de CPF

Apesar de conseguir validar outros campos, não consigo validar o CPF.

Alguém poderia ajudar?

//Não é necessario fazer um addEventListener diferente para cada input
//Será feito uma funcao generica para todos os inputs
//será feito uma verificacao para cada tipo de input e a funcao a ser chamada
export const valida = (input) => {
    const tipoDeInput = input.dataset.tipo

    if(validadores[tipoDeInput]) {
        validadores[tipoDeInput](input)
    }

    if(input.validity.valid) {
        input.parentElement.classList.remove('input-container--invalido');
        input.parentElement.querySelector('.input-mensagem-erro').innerHTML = '';
    } else {
        input.parentElement.classList.add('input-container--invalido');
        input.parentElement.querySelector('.input-mensagem-erro').innerHTML = mostraMensagemDeErro(tipoDeInput, input);
    }

}

const tiposDeErro = [
    'valueMissing',
    'typeMismatch',
    'patternMismatch',
    'customError'
]

const mensagensDeErro = {
    nome: {
        valueMissing: 'O campo nome não pode estar vazio.'
    },
    email: {
        valueMissing: 'O campo email não pode estar vazio.',
        typeMismatch: 'O email digitado não é válido.'
    },
    senha: {
        valueMissing: 'O campo senha não pode estar vazio.',
        patternMismatch: 'A senha deve conter entre 6 a 12 caracteres, deve conter pelo menos uma letra maiúscula, um número e não deve conter símbolos.'
    },
    dataNascimento: {
        valueMissing: 'O campo data não pode estar vazio.',
        customError: 'Você deve ser maior que 18 anos para se cadastrar.'
    },
    cpf: {
        valueMissing: 'O campo de CPF não pode estar vazio.',
        customError: 'O CPF digitado não é válido.'
    }
}


const validadores = {
    dataNascimento: input => validaDataNascimento(input),
    cpf: (input) => validaCPF(input)
}

const mostraMensagemDeErro = (tipoDeInput, input) => {
    let mensagem = '';
    tiposDeErro.forEach((erro) => {
        if (input.validity[erro]) {
            mensagem = mensagensDeErro[tipoDeInput][erro];
        }
    })
    return mensagem;
}

//Colocar um evento dentro do input, para toda vez que perder o foco a
//funcao é chamada
//blur : occurs when an element loses focus.

const inputData = document.querySelector('#nascimento');
inputData.addEventListener('blur', (event)=>{
    console.log(event)
    console.log(event.target)
    validaDataNascimento(event.target);
})

const validaDataNascimento = (input) => {
    //Input vem como string e será tranformado em data
    const dataRecebida = new Date(input.value);

    let mensagem = '';

    if(!maiorQue18(dataRecebida)) {
        mensagem = 'Você deve ser maior que 18 anos para se cadastrar.'
    };

    input.setCustomValidity(mensagem);
};

const maiorQue18 = (data) => {
    //Data atual
    const dataAtual = new Date();
    const dataMais18 = new Date(data.getUTCFullYear() + 18, data.getUTCMonth(), data.getUTCDate());

    //Comparacao
    //Se dataMais 18 for menor que dataAtual a pessoa é menor de idade.
    return dataMais18 <= dataAtual;
};

const validaCPF = (input) => {
    //Tudo que não for digito e troque por uma string vazia
    const cpfFormatado = input.value.replace(/\D/g, '');
    let mensagem = '';

    if (!checaCPFRepetidos(cpfFormatado)) {
        mensagem = 'O CPF digitado não é válido.'
    }

    input.setCustomValidity(mensagem)
}

const checaCPFRepetidos = (cpf) => {
    const valoresRepetidos = [
        '00000000000',
        '11111111111',
        '22222222222',
        '33333333333',
        '44444444444',
        '55555555555',
        '66666666666',
        '77777777777',
        '88888888888',
        '99999999999'
    ]
    let cpfValido = true;

    valoresRepetidos.forEach((element) => {
        if (element == cpf) {
            cpfValido == false;
        }
    })

    return cpfValido;
}
4 respostas

O meu app.js

import { valida } from "./validacao.js";

const inputs = document.querySelectorAll('input');

inputs.forEach(input => {
    input.addEventListener('blur', (event) => {
        valida(event.target)
    })
});

Fala Diego, tudo bem?

Poderia mandar o seu código html por favor?

Fala Mateus, tudo tranquilo. Coloquei o código no Gist.

https://gist.github.com/diegodmitry/ff24b968cbbaaf93296734d92b75ab89

Olá boa tarde. Eu cheguei até aqui pq o meu estava dando sempre o erro de inválido e vi que faltava no meu o return. Já no seu tem um parenteses fechando o element: valoresRepetidos.forEach((element) => {

Segue o meu script:

function checaCPFRepetidos(cpf) {
    const valoresRepetidos = [
    '00000000000',
    '11111111111',
    '22222222222',
    '33333333333',
    '44444444444',
    '55555555555',
    '66666666666',
    '77777777777',
    '88888888888',
    '99999999999'
    ]

    let cpfValido = true

    valoresRepetidos.forEach(valor =>{
        if (valor == cpf) {
            cpfValido = false
        }
    })

    return cpfValido
}