2
respostas

[Bug] INPUTS

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)
    })
})
2 respostas

Os erros dos campos nome e email consegui resolver, mas o da senha deu um bug monstro no regex lá do html nesse trecho do código no javascript, e estoura um erro falando que data is not defined

  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 = mostraMensagemErro(tipoDeInput, input)
    }

Oii, Dev! Tudo bem?

Agradeço por aguardar o nosso retorno.

Para que eu possa simular o seu problema e te ajudar, encontrando uma solução mais assertiva, peço, por gentileza, que você compartilhe o link do seu projeto no GitHub ou um drive com todos os arquivos utilizados no projeto.

Fico no aguardo.

Abraço!