1
resposta

Ta dando erro no valueMissing

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

import ehUmCPF from "./valida-cpf.js";
import ehMaiorDeIdade from "./valida-idade.js";

const camposDoFormulario = document.querySelectorAll("[required]");

camposDoFormulario.forEach((campo) => {
    campo.addEventListener("blur", () => verificaCampo(campo));
    campo.addEventListener("invalid", evento => evento.preventDefault())
})

const tiposDeErro = [
  'valueMissing',
  'typeMissing',
  'patternMismatch',
  'tooShort',
  'customError'
]

const mensagens = {
  nome: {
      valueMissing: "O campo de nome não pode estar vazio.",
      patternMismatch: "Por favor, preencha um nome válido.",
      tooShort: "Por favor, preencha um nome válido."
  },
  email: {
      valueMissing: "O campo de e-mail não pode estar vazio.",
      typeMismatch: "Por favor, preencha um email válido.",
      tooShort: "Por favor, preencha um e-mail válido."
  },
  rg: {
      valueMissing: "O campo de RG não pode estar vazio.",
      patternMismatch: "Por favor, preencha um RG válido.",
      tooShort: "O campo de RG não tem caractéres suficientes."
  },
  cpf: {
      valueMissing: 'O campo de CPF não pode estar vazio.',
      patternMismatch: "Por favor, preencha um CPF válido.",
      customError: "O CPF digitado não existe.",
      tooShort: "O campo de CPF não tem caractéres suficientes."
  },
  aniversario: {
      valueMissing: 'O campo de data de nascimento não pode estar vazio.',
      customError: 'Você deve ser maior que 18 anos para se cadastrar.'
  },
  termos: {
      valueMissing: 'Você deve aceitar nossos termos antes de continuar.',
  }
}

function verificaCampo(campo) {
  let mensagem = "";
  if (campo.name == "cpf" && campo.value.length >= 11) {
    ehUmCPF(campo);
  } 
  if (campo.name == "aniversario" && campo.value != "") {
      ehMaiorDeIdade(campo);
  }
 tiposDeErro.forEach(erro => {
  if (campo.validity[erro]) {
    mensagem = mensagens[campo.nome][erro];
    console.log(mensagem)
  }
 })
}
1 resposta

Olá Matheus, boa tarde. No trecho:

mensagem = mensagens[campo.nome][erro];

Acho que acabou rolando uma confusão na hora de referenciar o atributo 'name' da variável 'campo'. Corrigindo isso, vai deve dar certo.

mensagem = mensagens[campo.name][erro];

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