[Dúvida] Mensagem de erro no submit | JavaScript: validando formulários

Boa tarde. Minha dúvida é a seguinte. Quando você clica em um campo e depois tira o foco('blur') a mensagem de erro aparece. Mas se antes da pessoa clicar em qualquer campo do formulário ela clicar no botão de submit nada acontece. Como isso pode ser implementado ? Ou nesse projeto já está e eu errei em alguma coisa ? Se alguem puder me ajudar fico muito grato

import ehUmCPF from './valida-cpf.js';
import ehUmaIdadeValida from './valida-idade.js';
const camposDoFormulario = document.querySelectorAll('[required');
const formulario = document.querySelector('[data-formulario');
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.',
  },
};
const tiposDeErro = [
  'valueMissing',
  'typeMismatch',
  'patternMismatch',
  'tooShort',
  'customError',
];

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

formulario.addEventListener('submit', e => {
  e.preventDefault();

  const listaRespostas = {
    nome: e.target.elements['nome'].value,
    email: e.target.elements['email'].value,
    rg: e.target.elements['rg'].value,
    cpf: e.target.elements['cpf'].value,
    aniversario: e.target.elements['aniversario'].value,
  };

  localStorage.setItem('cadastro', JSON.stringify(listaRespostas));

  window.location.href = './abrir-conta-form-2.html';
});

function verificaCampo(campo) {
  let mensagem = '';
  campo.setCustomValidity('');
  if (campo.name === 'cpf' && campo.value.length >= 11) {
    ehUmCPF(campo);
  }
  if (campo.name === 'aniversario' && campo.value != '') {
    ehUmaIdadeValida(campo);
  }

  tiposDeErro.forEach(erro => {
    if (campo.validity[erro]) {
      mensagem = mensagens[campo.name][erro];
      console.log(mensagem);
    }
  });

  const mensagemErro = campo.parentNode.querySelector('.mensagem-erro');
  const validadorDeInput = campo.checkValidity();

  if (!validadorDeInput) {
    mensagemErro.textContent = mensagem;
  } else {
    mensagemErro.textContent = '';
  }
}

Olá Mario, tudo bem? Pelo que entendi, você gostaria que a mensagem de erro aparecesse também quando o botão de submit é clicado antes de preencher os campos do formulário, certo?

Para implementar essa funcionalidade, você pode adicionar uma verificação no evento de submit do formulário, antes de enviar os dados. Você pode percorrer todos os campos do formulário e verificar se eles estão preenchidos corretamente, utilizando a função "verificaCampo" que já está sendo utilizada no evento "blur" dos campos.

Segue um exemplo de como você pode fazer isso:

formulario.addEventListener('submit', e => {
  e.preventDefault();

  let todosOsCamposValidos = true;
  camposDoFormulario.forEach(campo => {
    verificaCampo(campo);
    if (!campo.checkValidity()) {
      todosOsCamposValidos = false;
    }
  });

  if (todosOsCamposValidos) {
    const listaRespostas = {
      nome: e.target.elements['nome'].value,
      email: e.target.elements['email'].value,
      rg: e.target.elements['rg'].value,
      cpf: e.target.elements['cpf'].value,
      aniversario: e.target.elements['aniversario'].value,
    };

    localStorage.setItem('cadastro', JSON.stringify(listaRespostas));

    window.location.href = './abrir-conta-form-2.html';
  }
});

Nesse exemplo, a variável "todosOsCamposValidos" é inicializada como true, e percorremos todos os campos do formulário verificando se eles são válidos. Se algum campo estiver inválido, a variável é alterada para false. Caso todos os campos estejam válidos, os dados são enviados para o localStorage e a página é redirecionada.

Espero ter ajudado e bons estudos!

Mergulhe em programação