3
respostas

O código não está validando a data de nascimento.

Segue o código do projeto. Baixado no módulo seguinte.

Já baixei o código do projeto no outro módulo e reescrevi o código mas quando o 'blur' do campo data de nascimento ocorre ou ele infoma "Este campo não é válido." ou nem verifica se a idade é maior que 18 anos. O que fazer?

export function 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 de nome não pode estar vazio.'
    },
    email: {
        valueMissing: 'O campo de email não pode estar vazio.',
        typeMismatch: 'O email digitado não é válido.'
    },
    senha: {
        valueMissing: 'O campo de 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 de data de nascimento não pode estar vazio.',
        customError: 'Você deve ser maior que 18 anos para se cadastrar.'
    }
}

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

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

    return mensagem
}

function validaDataNascimento(input) {
    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)
}

function maiorQue18(data) {
    const dataAtual = new Date()
    const dataMais18 = new Date(data.getUTCFullYear() + 18, data.getUTCMonth(), data.getUTCDate())

    return dataMais18 <= dataAtual
}
3 respostas

Como não está devolvendo o customError na mensagem de erro, a solução que encontrei foi alterar a mensagem de span direto no HTLM.

Fala ai Douglas, tudo bem? Apenas olhando os códigos é bem complicado achar o problema, posso deixar algum detalhe passar facilmente.

Sendo assim, vou lhe pedir um favor, compartilha o projeto completo comigo, dessa forma eu consigo simular o problema por aqui e analisá-lo com mais calma.

Pode compartilhar através do Github ou Google Drive (zipado).

Fico no aguardo.

Olá Douglas. A solução está no cadastro.html colocando o data-atributes pra cada input do form. No campo nome: data-tipo="nome", no campo email: data-tipo="email" e no campo senha:data-tipo="senha". Espero que tenha solucionado!

<input name="nome" id="nome" class="input" type="text" placeholder="Nome" data-tipo="nome" required>
                        <label class="input-label" for="nome">Nome</label>
                        <span class="input-mensagem-erro">Este campo não está válido</span>
                    </div>
                    <div class="input-container">
                        <input name="email" id="email" class="input" type="email" data-tipo="email" placeholder="Email" required>
                        <label class="input-label" for="email">Email</label>
                        <span class="input-mensagem-erro">Este campo não está válido</span>
                    </div>
                    <div class="input-container">
                        <input name="senha" id="senha" class="input" type="password" data-tipo="senha" placeholder="Senha" ...