Fiz todos os passos da primeira aula de validação de cpf mas quando eu coloco o cpf repetido não aparece a mensagem, a estilização acontece mas só a mensagem que não aparece, a mensagem das outras validações aparecem normalmente, segue código do javascript
export function valida(input) {
const tipoDeInput = input.dataset.tipo
if(validadores[tipoDeInput]) {
validadores[tipoDeInput](input)
}
if(input.validity.valid) {
input.parentElement.classList.remove('formulario__campo__div-erro')
input.classList.remove('formulario__campo__div__input-erro')
input.parentElement.querySelector('.formulario__campo__div__span--erro').innerHTML = ''
} else {
input.parentElement.classList.add('formulario__campo__div-erro')
input.classList.add('formulario__campo__div__input-erro')
input.parentElement.querySelector('.formulario__campo__div__span--erro').innerHTML = mostraMensagemDeErro(tipoDeInput, input)
}
}
const tiposDeErro = [
'valueMissing',
'typeMismatch',
'patternMismatch'
]
const mensagensDeErro = {
nome: {
valueMissing: 'O campo nome não pode estar vazio.'
},
cpf: {
valueMissing: 'O campo cpf não pode estar vazio.',
customError: 'O CPF digitado não é válido.'
},
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 carácteres, deve conter pelo menos uma letra maiúscula, uma letra minúscula, um número e não deve conter símbolos.'
}
}
const validadores = {
cpf:input => validaCPF(input)
}
function mostraMensagemDeErro(tipoDeInput, input) {
let mensagem = ''
tiposDeErro.forEach(erro => {
if(input.validity[erro]) {
mensagem = mensagensDeErro[tipoDeInput][erro]
}
})
return mensagem
}
function validaCPF(input) {
const cpfFormatado = input.value.replace(/\D/g, '');
let mensagem = ''
if(!checaRepeticaoCPF(cpfFormatado)) {
mensagem = 'O CPF digitado não é válido.';
}
input.setCustomValidity(mensagem)
}
function checaRepeticaoCPF(cpf) {
const valoresRepetidos = [
'00000000000',
'11111111111',
'22222222222',
'33333333333',
'44444444444',
'55555555555',
'77777777777',
'88888888888',
'99999999999'
]
let cpfValido = true
valoresRepetidos.forEach(valor => {
if(valor == cpf) {
cpfValido = false;
}
})
return cpfValido;
}
