Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Validação não acontece

Segui os passos da aula mas não acontece a validação do formulário, a seguir está o meu código javascript e html, algumas coisas como a validação de data não estão presentes e outros campos estão no código pois estou fazendo para um projeto meu, antes de acrescentar a parte das mensagens automaticamente estava sendo aplicada as classes CSS mas agora não mais: 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.'
    },
    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'
    }
}  

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

import { valida } from './validacaoController.js'

const inputs = document.querySelectorAll('input')

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

HTML:

<div>
    <div class="formulario__campo">
        <label for="nomeInput" class="formulario__campo__label">Nome:</label>
        <div class="formulario__campo__div">
            <input type="text" class="formulario__campo__div__input" id="nomeInput" placeholder="Digite seu nome completo..." data-tipo="nomeCompleto" required>
            <span class="formulario__campo__div__span--erro"></span>
        </div>
    </div>
    <div class="formulario__campo">
        <label for="cpfInput" class="formulario__campo__label">CPF:</label>
        <div class="formulario__campo__div">
            <input type="number" class="formulario__campo__div__input" id="cpfInput" placeholder="Digite seu cpf..." size="11" data-tipo="CPF" required>
            <span class="formulario__campo__div__span--erro"></span>
        </div>
    </div>
    <div class="formulario__campo">
        <label for="emailInput" class="formulario__campo__label">Email:</label>
        <div class="formulario__campo__div ">
            <input type="email" class="formulario__campo__div__input" id="emailInput"  placeholder="Digite seu email..." data-tipo="email" required>
            <span class="formulario__campo__div__span--erro"></span> 
        </div>
    </div>
    <div class="formulario__campo">
        <label for="senhaInput" class="formulario__campo__label">Senha:</label>
        <div class="formulario__campo__div">
            <input type="password" class="formulario__campo__div__input" id="senhaInput" data-tipo="senha" placeholder="Crie uma senha..." 
            pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{4,8}$" required>
            <span class="formulario__campo__div__span--erro"></span>
        </div>
    </div>
    <div class="formulario__campo formulario__campo__cadastro">
        <input type="submit" class="formulario__campo__submit" value="Cadastrar-se">
    </div>
    <div class="formulario__entrar">
        <p class="formulario__entrar__p">Já tem conta? 
        <a class="formulario__entrar__a" href="login">Entre aqui</a>
        </p>
    </div>
<div>
1 resposta
solução!

Descobri meu erro, os data atributtes estavam escritos de forma errada, ao colocar data-tipo="" o que está entre as aspas não pode estar em capslock e não me atentei a este detalhe.