1
resposta

Mensagem de validação para CPF inválido não acontece

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:
```
1 resposta

Oi Luis, tudo bem?

Desculpa a demora em responder. Se ainda estiver com dúvidas manda aqui o seu código. Usando a opção de inserir bloco de código</>, você pode fazer isso.

Se você tiver dúvidas de como usar o fórum, você pode assistir esse Alura+ sobre Como turbinar seus estudos utilizando o fórum.

Um abraço e bons estudos.