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;
}