Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

[Dúvida] Erro na lógica de validação

Bom dia, alguém com domínio de lógica de programação, criei um formulário com dois input(nome e e-mail) e um textArea. fiz a lógica em Javascript para informar que o e-mail é inválido caso não tenha o formato do @. Assim que a pessoa digita errado ou deixa o campo em branco aparece uma mensagem erro, informando "Digite um e-mail válido". Tentei fazer isso com o campo nome, para que ao digitar números ou deixar o campo vazio, informe esse erro: "Digite um nome válido!". mas não está aparecendo. Alguém pode me ajudar!

// Adicionando animação suave ao rolar a página
window.addEventListener('scroll', function() {
  const header = document.querySelector('header');
  header.classList.toggle('sticky', window.scrollY > 0);
});

// Animação ao clicar no link do menu para a seção correspondente
const menuLinks = document.querySelectorAll('.menu-link');

menuLinks.forEach(function(link) {
  link.addEventListener('click', function(event) {
    event.preventDefault();

    const target = document.querySelector(link.getAttribute('href'));
    target.scrollIntoView({
      behavior: 'smooth',
      block: 'start'
    });
  });
});

// Validação do formulário de contato
const form = document.querySelector('#contact-form');

form.addEventListener('submit', function(event) {
  event.preventDefault();

  const name = document.querySelector('#name').value.trim();
  const email = document.querySelector('#email').value.trim();
  const message = document.querySelector('#message').value.trim();

  if (name === '' || email === '' || message === '') {
    alert('Por favor, preencha todos os campos.');
  } else {
    const formData = new FormData();
    formData.append('name', name);
    formData.append('email', email);
    formData.append('message', message);

    fetch('/enviar-email', {
      method: 'POST',
      body: formData
    })
    .then(response => {
      if (response.ok) {
        alert('Formulário enviado com sucesso!');
        form.reset();
      } else {
        alert('Ocorreu um erro ao enviar o formulário. Por favor, tente novamente mais tarde.');
      }
    })
    .catch(error => {
      alert('Ocorreu um erro ao enviar o formulário. Por favor, tente novamente mais tarde.');
    });
  }
});

document.getElementById('contact-form').addEventListener('submit', function(event) {
  var nameInput = document.getElementById('name');
  var nameError = document.getElementById('name-error');
  
  if (nameInput.value.trim() === '') {
    event.preventDefault();
    nameError.style.display = 'block';
    nameInput.classList.add('invalid');
  } else if (/\d/.test(nameInput.value)) {
    event.preventDefault();
    nameError.style.display = 'block';
    nameError.textContent = 'O nome não pode conter números.';
    nameInput.classList.add('invalid');
  } else {
    nameError.style.display = 'none';
    nameInput.classList.remove('invalid');
  }
});

const emailInput = document.getElementById("email");
const emailError = document.getElementById("email-error");

emailInput.addEventListener("blur", function () {
  const email = emailInput.value;
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

  if (!emailRegex.test(email)) {
    emailInput.classList.add("invalid");
    emailError.style.display = "block";
  } else {
    emailInput.classList.remove("invalid");
    emailError.style.display = "none";
  }
});

// Inicialização da biblioteca SocialShare.js
const socialShareButtons = document.querySelectorAll('.social-share-button');
SocialShareButton.init(socialShareButtons);

// Manipulando os cliques nos botões de compartilhamento
socialShareButtons.forEach(function(button) {
  button.addEventListener('click', function() {
    const network = button.getAttribute('data-network');
    const url = window.location.href; // URL do seu projeto

    // Chamada para compartilhar nas redes sociais
    SocialShareButton.share(network, {
      url: url
    });
  });
});

const textarea = document.getElementById("message");
const charCount = document.getElementById("char-count");
const maxLength = textarea.getAttribute("maxlength");

textarea.addEventListener("input", function () {
  const remainingChars = maxLength - textarea.value.length;
  charCount.textContent = remainingChars + " caracteres restantes";
});
3 respostas
solução!

Olá Michel, tudo bem? Pelo que entendi, você está com dificuldades para validar o campo nome em seu formulário. Uma sugestão é adicionar um evento de validação no campo nome, assim como foi feito com o campo de e-mail. Você pode adicionar o seguinte código logo abaixo da validação de e-mail:

const nameInput = document.getElementById('name');
const nameError = document.getElementById('name-error');

nameInput.addEventListener('blur', function() {
  const name = nameInput.value.trim();
  if (name === '') {
    nameError.style.display = 'block';
    nameInput.classList.add('invalid');
  } else if (/\d/.test(name)) {
    nameError.style.display = 'block';
    nameError.textContent = 'O nome não pode conter números.';
    nameInput.classList.add('invalid');
  } else {
    nameError.style.display = 'none';
    nameInput.classList.remove('invalid');
  }
});

Esse código adiciona um evento de validação no campo nome que é disparado quando o campo perde o foco (blur). Ele verifica se o campo está vazio ou se contém números e exibe uma mensagem de erro caso necessário.

Espero ter ajudado e bons estudos!

Opa, Renan, obrigado! Resolveu. Tanto código que não me atentei a isso, tem hora que a mente buga, rsrs

Opa, Isso é normal e acontece com todos nós rsrs, eu que agradeço, fico feliz em ajudar :)