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>