Formulários: validação e envio

Trabalhe numa cópia da pasta inicio/ desta etapa. Ela já abre ou executa com as instruções do README. Leia o código, mude uma coisa e anote sua previsão antes de recarregar. Compare com a referência na pasta da etapa. Se nada mudar, confira a extensão do arquivo, o arquivo salvo e o caminho aberto. Blocos adicionais do capítulo são experiências separadas; a pasta de referência contém o programa completo desta etapa.

A Biblioteca da Ribeira, acervo comunitário fictício no bairro da Ribeira, Recife, testa um pedido de empréstimo. O código interno é inventado. Nada vai a um banco. Nada cadastra leitor.

O exemplo está em exemplos/24-formularios-validacao-e-envio/. Abra index.html. O ciclo: ler, copiar, mudar uma coisa, prever, recarregar, conferir.

O que você vai aprender

• Exigir campo com required.
• Restringir formato com pattern.
• Destacar erro com :invalid.
• Conferir validação e confirmação na mesma página.
• Entender envio por JavaScript só como ideia, sem backend neste capítulo.

required

required impede o envio se o campo estiver vazio. O navegador avisa. Você não escreve essa checagem em JS ainda.

<label for="email">E-mail de exemplo</label>
<input id="email" name="email" type="email" required>

Use um endereço fictício, como hora@ribeira.exemplo. Não use o seu.

pattern

pattern é uma expressão regular curta. Três letras e três números: [A-Za-z]{3}[0-9]{3}. title explica o formato para quem erra.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Pedido de empréstimo</title>
    <link rel="stylesheet" href="estilos.css">
  </head>
  <body>
    <h1>Pedido de empréstimo</h1>
    <form onsubmit="event.preventDefault()">
      <label for="email">E-mail de exemplo</label>
      <input id="email" name="email" type="email" required>
      <label for="isbn">Código interno (3 letras e 3 números)</label>
      <input id="isbn" name="isbn" required pattern="[A-Za-z]{3}[0-9]{3}" title="Três letras e três números">
      <p><button type="submit">Validar neste computador</button></p>
    </form>
  </body>
</html>

Tente abc12. Preveja: o navegador bloqueia. Confira. Depois ABC123. Deve passar.

:invalid

A pseudoclasse :invalid pinta o campo enquanto o valor não serve. Combina com required e pattern.

input:invalid { border: 2px solid #8a1f11; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid #e07a5f;
  outline-offset: 2px;
}

Borda de erro não substitui o aviso do navegador. Foco visível continua obrigatório.

GET local

GET e action indicariam envio e destino. Na referência, o apoio pronto no atributo onsubmit cancela o envio e mostra uma confirmação local. É teste de validação; não é API nem cadastro.

Envio com JS, só a ideia

fetch pode mandar o formulário em segundo plano. Isso pede um endereço que aceite o pedido. Neste capítulo não há backend. Não monte FormData contra um site real.

O capítulo 26 mostra um processo que escuta 127.0.0.1. Django e Express entram depois. Aqui a validação nativa e o GET local bastam.

Erro comum: tirar required para “ver se envia”. O ponto da lição some. Outro erro: pattern com espaço a mais, que nunca casa.

Arquivo no disco valida na janela. O apoio pronto mostra a confirmação na própria página. Isso não é publicação. Servidor, se usar, só 127.0.0.1.

Atividades

1. O que type="email" exige que type="text" não exige?
2. Por que ABC123 passa no pattern e 12AB34 não passa?
3. Enviar o form com JavaScript neste capítulo grava o pedido num servidor?

Respostas comentadas

1. Um valor no formato de e-mail, com @. Texto puro aceita qualquer string, inclusive vazia se não houver required.
2. O padrão pede três letras e só depois três números. 12AB34 começa com dígito.
3. Não. Sem backend nesta pasta, JS de envio seria só conceito. O apoio pronto cancela o envio e a confirmação permanece na página.