Formulários e validação local

Inscrição fictícia: validar no navegador e não enviar nada. preventDefault no submit é obrigatório.

Trabalhe sobre uma cópia da pasta inicio do exemplo correspondente. Leia, digite, mude uma coisa, preveja o resultado, recarregue e confira. A referência completa fica na raiz da pasta do exemplo, no pacote anexo.

O que você pratica

• Explique o papel central desta etapa no exemplo 18-formularios.
• Implemente a versão inicio e descreva uma mudança que você testou.
• Qual erro comum deste capítulo você conseguiu provocar de propósito?

preventDefault

No submit do formulário, chame evento.preventDefault() antes de validar.

Validar e-mail e oficina

Cheque @ e . no e-mail. Exija oficina escolhida. Use role="alert" no erro.

Nada na rede

Este volume não grava inscrição. Dados fictícios.

Ler o exemplo completo

A referência desta etapa usa app.js, index.html, styles.css. Abra primeiro o resultado pronto e identifique onde acontece preventdefault. Depois compare o mesmo ponto com a pasta inicio. Essa comparação mostra exatamente o que você precisa escrever, sem esconder partes indispensáveis do programa.

Diagnóstico guiado

Se o resultado não aparecer, confirme o arquivo aberto, salve a alteração e recarregue. Em seguida, abra o Console: leia a primeira mensagem de erro, confira o nome do arquivo e a linha indicada. Quando houver fetch, sirva a pasta apenas em 127.0.0.1; abrir por file:// não reproduz o pedido HTTP.

Critério de avanço

Avance quando conseguir explicar o papel de inicio, realizar uma mudança pequena e restaurar o exemplo sem copiar a resposta comentada.

Atividades

1. Na referência, onde aparece preventdefault e qual efeito você observa?
2. Na cópia inicio, mude apenas inicio. O que você prevê antes de executar novamente?
3. Provoque uma falha pequena nesta etapa. Qual mensagem ou comportamento ajudou você a encontrar a causa?

Respostas comentadas

Só abra depois de tentar.

Atividade 1. A resposta deve apontar o arquivo e ligar o trecho ao efeito visível. Compare com app.js, index.html, styles.css.

Atividade 2. Registre o valor anterior, o novo valor e o resultado previsto. Depois confira; se houver diferença, explique o que o programa realmente fez.

Atividade 3. Uma boa investigação começa pela primeira mensagem do Console, pelo arquivo salvo e pelo caminho aberto. Corrija uma causa por vez e execute de novo.

Exemplo deste capítulo: pacote de exemplos/18-formularios/.

O arquivo completo

Referência do exemplo 18-formularios, reproduzida aqui para que você possa conferir sem sair da página.

app.js

const form = document.querySelector("#form");
const erro = document.querySelector("#erro");
const ok = document.querySelector("#ok");

form.addEventListener("submit", (evento) => {
  evento.preventDefault();
  ok.hidden = true;
  erro.hidden = true;

  const email = form.email.value.trim();
  const oficina = form.oficina.value;

  if (!email.includes("@") || !email.includes(".")) {
    erro.textContent = "Informe um e-mail com @ e domínio.";
    erro.hidden = false;
    form.email.focus();
    return;
  }
  if (!oficina) {
    erro.textContent = "Escolha uma oficina.";
    erro.hidden = false;
    form.oficina.focus();
    return;
  }

  ok.hidden = false;
});