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";
});