5
respostas

Não deu ;(

Olá, Acompanhei tudo o que professor explicando porém aqui validação.js deu erro, veja

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

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.querSelector('.input-mensagem-erro').innerHTML = ''
  } else {
    input.parentElement.classList.add('input-container--invalido')
    input.parentElement.querSelector('.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 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 6 a 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 => validaDataNascimento(input)
}

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

  return mensagem
}

function validaDataNascimento(input) {
  const dataRecebida = new Date(input.value)
  let mensagem = ' '

  if(!maiorQue18(dataRecebida)) {
      mensagem = 'Você deve ser maior que 18 anos para se cadastrar.'
  }

  input.setCustomValidity(mensagem)
}

function maiorQue18(data) {
  const dataAtual = new Date()
  const dataMais18 = new Date(data.getUTCFullYear() + 18, data.getUTCMonth(), data.getUTCDate())

  return dataMais18 <= dataAtual
}
5 respostas

Boa tarde, Laís! Tudo bem?

Aparentemente está igual ao do professor mesmo, tem como compartilhar outras partes do código como o app.js?

Fico no aguardo!

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

const inputs = document.querySelectorAll('input')

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

Oie Lais!

Testei aqui seu código completo e encontrei o problema:

No validacao.js você está escrevendo querSelector mas o correto é querySelector, depois de arrumar isso ele apareceu as mensagens corretamente por aqui. Ele acontece nas linhas 10 e 13 do código.

Oiê Mônica, Arrumei querSelector para querySelector porém ele continua o problema. Digitei o cpf 22222222222, tá valido. O que quero ele me mostrar a mensagem de erro. Segue meus códigos mais fácil pra visualizar abaixo: https://github.com/Laisayuri/Doguito_PetShop_Validacao Ficarei grata

Oii, Lais! Desse tópico eu foquei no problema do nome mesmo, mas já te respondi nesse tópico aqui sobre o cpf: https://cursos.alura.com.br/forum/topico-aqui-cpf-ta-valido-de-qq-jeito-193785

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software