🚀 Capítulo 14: Formulários

🎯 Objetivo da Aula

Ao final desta aula, você saberá como capturar os dados de um formulário completo, evitar que a página recarregue e validar se os campos foram preenchidos.

---

🏢 O Cenário Prático (Seu Desafio)

O formulário de alistamento precisa de travas de segurança! Se o voluntário não digitar o nome, o sistema não pode aceitá-lo. Seu desafio é validar o formulário antes de enviar!

---

🧠 Fundamentos: A Teoria Traduzida

Quando trabalhamos com formulários (<form>), o evento mais importante é o submit (enviar).

Passos padrão:

1. Ouvir o submit no formulário.
2. Usar e.preventDefault() para a página não recarregar.
3. Ler os valores dos inputs usando .value.
4. Validar se estão vazios.

---

📖 Exemplo Guiado: Validação Simples

<form id="meuForm">
  <input type="text" id="nome" placeholder="Digite seu nome" />
  <button type="submit">Enviar</button>
</form>

const form = document.querySelector('#meuForm');
const inputNome = document.querySelector('#nome');
 
form.addEventListener('submit', (e) => {
  e.preventDefault(); // Não recarrega!
  
  if (inputNome.value === '') {
    alert('Por favor, preencha o nome!');
  } else {
    alert('Formulário enviado com sucesso para: ' + inputNome.value);
  }
});

---

🛠️ Prática Obrigatória 1

Adicione um campo de e-mail no formulário e valide se ele contém o caractere @.

---

🛠️ Prática Obrigatória 2

Limpe o campo de texto após o envio bem-sucedido (inputNome.value = '').

---

🔑 Gabarito de Código/Fórmulas

Prática 2:

inputNome.value = '';

---

← Capitulo Anterior | Proximo Capitulo →