Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

InnerHTML erro no console.

Erro console

validacao.js

export function valida(input) {
    const tipoDeInput = input.dataset.tipo;

    if (validadores[tipoDeInput]) {
        validadores[tipoDeInput](input);
    }

    //true
    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 de email nao 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 maíuscula, 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 => validaDataNacimento(input)
}

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

    return mensagem;
}

function validaDataNacimento(input) {
    const dataRecebido = new Date(input.value);

    let mensagem = '';

    if (!maiorQue18(dataRecebido)) {
        mensagem = 'Você deve ser maior que 18 anos para se cadastrar.';
    }    

    input.setCustomValidity(mensagem);
}

function maiorQue18(data) { 
    const dataAtual = new Date();//data de hoje
    const dataMais18 = new Date(data.getUTCFullYear() + 18, data.getUTCMonth(), data.getUTCDate());//ano mes dia

    return dataMais18 <= dataAtual;//menor ou igual
}

app.js

import { valida } from "./validacao.js";

const inputs = document.querySelectorAll('input');

inputs.forEach(input => {
    input.addEventListener('blur', (evento) => {
        valida(evento.target);
    });
});

html

<fieldset>
                    <legend class="formulario__legenda">Informações básicas</legend>
                    <div class="input-container">
                        <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" placeholder="Email" data-tipo="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" placeholder="Senha" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?!.*[ !@#$%^&*_=+-]).{6,12}$" title="A senha deve conter entre 6 a 12 caracteres, deve conter pelo menos uma letra maíuscula, um número e não deve conter símbolos" data-tipo="senha" required>
                        <label class="input-label" for="senha">Senha</label>
                        <span class="input-mensagem-erro">Este campo não está válido</span>
                    </div>
                </fieldset>

Alguem pode me ajudar, pois não retorna igual do instrutor na aula.

2 respostas
solução!

Achei meu erro depois de revisar com calma.

         input.parentElement.querySelector('.input-mensagem-erro').innerHTML = '';
    } else {       
        input.parentElement.querySelector('.input-mensagem-erro').innerHTML = mostraMensagemDeErro(tipoDeInput, input);

esqueci de colocar o . (ponto) na class do span rs.

Olá Igor,

tinha cometido o mesmo erro, acho que foi por conta da parte de cima do código que não tem o . ai acabei não colocando o ponto abaixo também.

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(tipoInput, input);
}

Obrigado por compartilhar sua solução. Forte abraço!