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.