Estou fazendo o curso de validações do formulário e cheguei na aula em que vemos como deixar como inválido cpf repetido, entretanto a mensagem não aparece no formulário, a seguir está meu JS e HTML:
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
}
CPF:
```