Curso de HTML / Validar um formulário: required, comprimento e limites de valores

A validação de formulário integrada ao HTML pode verificar valores ausentes, comprimento do texto, intervalos numéricos e alguns formatos de entrada antes do envio. Atributos como required, minlength e max ajudam o navegador a orientar os usuários. Eles não substituem a validação do lado do servidor.

Exigir um valor e limitar seu comprimento

<form method="get">
  <label for="nickname">Apelido (2 a 20 caracteres)</label>
  <input id="nickname" name="nickname" type="text"
         required minlength="2" maxlength="20">
  <button type="submit">Verificar</button>
</form>

Tente enviar um campo vazio, depois um caractere, depois dois caracteres. required verifica a presença de um valor, enquanto minlength verifica o comprimento do texto fornecido pelo usuário; nenhum dos dois implica o outro. A mensagem exata do navegador varia conforme o navegador, o sistema operacional e o idioma. Informe os usuários sobre a regra antes que eles enviem, em vez de depender apenas de uma mensagem de erro. As restrições de comprimento podem se comportar de maneira diferente para valores preenchidos por script, portanto, teste a entrada programada separadamente se seu formulário a utilizar.

maxlength="20" geralmente impede os usuários de digitar mais do que seu limite. O HTML mede esse limite em unidades de código UTF-16 de 16 bits, que nem sempre correspondem ao número de caracteres visíveis — por exemplo, com alguns emojis. Se você permitir esses caracteres, teste juntos a entrada real e a regra de comprimento do servidor. Veja a referência MDN maxlength.

Verifique um intervalo ou formato básico

<form method="get">
  <label for="people">Participantes (1–10)</label>
  <input id="people" name="people" type="number"
         min="1" max="10" step="1" required>

  <label for="email">Endereço de e-mail</label>
  <input id="email" name="email" type="email" required>
  <button type="submit">Verificar</button>
</form>

min e max definem o intervalo; step define o incremento permitido. Digite manualmente 0, 11 e 2,5, depois compare com os botões de incremento. O separador decimal depende do idioma do navegador: use 2.5 se 2,5 não for aceito. O fato de um valor estar visível na entrada não significa que ele seja válido para envio. type="email" verifica um formato de endereço básico, não se a caixa de correio realmente existe. Escolha os tipos de entrada com base no significado do valor em Escolher tipos de entrada para Email, Números, Datas e Escolhas.

Este é um formulário GET enviado para o URL atual para fins de prática. Use um valor de teste como nome@example.com, e não um endereço pessoal verdadeiro. Uma vez que os valores passam pela validação do navegador, você pode inspecionar people e email na string de consulta do URL. Este exemplo não inclui um servidor que receba ou armazene os dados.

Escreva orientações de erro que ajudem a corrigir o valor

Não se contente em identificar os erros apenas pela cor. “Digite um número inteiro de 1 a 10” fornece mais informações aos usuários do que “Entrada inválida”. Se você criar mensagens personalizadas, vincule cada mensagem ao controle relevante e verifique se os usuários que usam o teclado podem retornar a ela. O atributo novalidate em form ignora a validação interativa integrada durante o envio; não o adicione apenas para ocultar um problema. Mantenha as condições visíveis e vincule-as ao controle usando as instruções de Adicionar um texto indicativo aos campos de formulário.

Uma pessoa pode contornar as verificações do navegador usando as ferramentas de desenvolvimento ou uma requisição direta. Sempre valide os dados importantes no servidor, especialmente os valores usados para contas, pagamentos ou registros armazenados. As verificações do lado do navegador ajudam os usuários a corrigirem seus erros; as verificações do lado do servidor protegem o aplicativo. Consulte o guia MDN sobre a validação de restrições.

Antes de adicionar uma interface de erro personalizada, aplique também as verificações de acessibilidade para o uso do teclado, o foco e os nomes.

Compare os valores limites com os erros esperados

O campo de participantes usa min="1" max="10" step="1" required. Digite cada valor e tente enviar, mantendo um e-mail de teste corretamente formatado para que o erro de outro campo não esconda o resultado.

A formulação exata dos erros incorporados varia. A tabela distingue as restrições falhadas em vez de prescrever uma sequência de mensagens. Uma quantidade válida de 2 não torna o formulário inteiro válido se outro campo ainda falhar.

As indicações incorporadas seguem as restrições do HTML. Uma interface de erro personalizada deve relacionar as mensagens aos seus controles e gerenciar as mudanças de estado e o foco. Isso requer implementação e testes adicionais; aria-describedby por si só não cria validação.

Teste você mesmo as regras

1. Envie com cada campo obrigatório vazio.
2. Tente valores logo fora e dentro de cada limite indicado.
3. Use apenas o teclado para acessar os campos, ler os erros, corrigi-los e enviar novamente.