ola, tudo bem? O input do nome nao deixa de ficar vermelho, o da senha aceita qualquer coisa, não sei 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-container-erro').innerHTML = ''
}else{
input.parentElement.classList.add('input-container--invalido')
input.parentElement.querySelector('input-container-erro').innerHTML = mostraMensagemErro(tipoDeInput, input)
}
}
const tiposDeErros = [
"valueMissing",
"typeMismatch",
"patternMismatch",
"custonError"
]
const mensagensDeErro = {
nome: {
valueMissing: 'O campo nome não pode estar vazio'
},
email: {
valueMissing: 'O campo de senha 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 8 e 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 => validadeIdade(input)
}
function mostraMensagemErro(tipoDeInput, input){
let mensagem = ''
tiposDeErros.forEach(erro => {
if(input.validity[erro]) {
mensagem = mensagensDeErro[tipoDeInput][erro]
}
})
return mensagem
}
function validadeIdade(input){
const dataRecebida = new Date(input.value)
let mensagem = ''
if(!maiorDeIdade(dataRecebida)){
mensagem = 'Você deve ser maior de idade para se cadastrar!'}
input.setCustomValidity(mensagem)
}
function maiorDeIdade(){
const dataAtual = new Date()
const dataMaior17 = new Date(data.getUTCFullYear() + 17, data.getUTCmonth(), data.getUTCdate())
return dataMaior17 <= dataAtual
}
import {valida} from './validacao.js'
const inputs = document.querySelectorAll('input')
inputs.forEach(input => {
input.addEventListener('blur',(evento) =>{
valida(evento.target)
})
})