Validando o formulário de contato
O formulário de contato que você montou no curso de HTML aceita qualquer coisa, até o vazio. Hora de ensiná-lo a dizer não.
Estudar esta lição interativa →No curso de HTML, o formulário de contato ganhou os campos certos (nome, e-mail, mensagem, cada um com seu label associado), e no curso de CSS ele ganhou uma cara profissional. Mas, sem nenhum JavaScript, um <form> tem dois problemas sérios: ao clicar em "Enviar", a página inteira recarrega (perdendo tudo que a pessoa digitou), e não existe nenhuma verificação: um clique com todos os campos vazios "funciona" do mesmo jeito que um preenchido corretamente.
Pense num porteiro na entrada de um prédio: antes de deixar alguém subir, ele confere se a papelada está completa. Sem essa checagem, qualquer coisa passaria, inclusive um envelope vazio. É esse o papel da validação: uma checagem que acontece antes de aceitar o que foi enviado, recusando com uma explicação clara quando falta algo.
O primeiro passo é impedir o recarregamento. O evento de envio de um formulário se chama "submit", e a função que o escuta recebe automaticamente um objeto de evento (chame-o de e, por convenção). Chamar e.preventDefault() logo na primeira linha cancela o comportamento padrão do navegador (recarregar a página), deixando o controle todo com o seu JavaScript. Depois, é ler cada campo com .value (do Módulo 7) e aparar espaços com .trim() (do projeto Lista de Tarefas), exatamente como você fez no app de tarefas.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Clique em Enviar com campos vazios, depois preencha tudo e envie de novo.
Repare no if (... === "") { ...; return; } logo no início da função: é o mesmo padrão de saída antecipada do app de tarefas (o projeto Lista de Tarefas). Se algum campo estiver vazio, a função mostra o erro e sai imediatamente, sem chegar nas linhas de sucesso lá embaixo. É um jeito limpo de tratar o caso inválido primeiro e seguir em frente só quando está tudo certo.