Validação de formulário HTML

Tempo de leitura: 4 minutos

A validação de formulários é a primeira linha de defesa contra dados incorretos ou maliciosos. O HTML5 revolucionou esse processo ao introduzir atributos nativos que permitem uma validação rápida e eficiente no lado do cliente (diretamente no navegador), melhorando a experiência do usuário (UX) com feedback imediato.

Neste artigo, vamos explorar os atributos required, pattern e title, que são as ferramentas essenciais para construir formulários robustos, e discutiremos por que a validação HTML deve ser sempre complementada pela segurança do servidor.

1. Atributo `required`: A Obrigatoriedade Simples

O atributo required é a forma mais simples de validação.

Função: Indica que um campo (<input>, <textarea>, <select>) não pode estar vazio para que o formulário seja submetido.
Comportamento: Se o campo estiver vazio, o navegador exibe uma mensagem de erro padrão e impede o envio.
Aplica-se a: Todos os campos onde o valor é fundamental (ex: Nome, E-mail).

Exemplo:

HTML

<label for="nome">Nome Completo</label>
<input type="text" id="nome" name="nome_completo" required>

Nome Completo

2. Atributo `pattern`: Validação por Expressões Regulares

O atributo pattern é a ferramenta mais poderosa do HTML5 para validação. Ele permite definir uma Expressão Regular (Regex) que o valor do campo deve corresponder.

Função: Garante que o formato ou a estrutura do dado inserido esteja correta (ex: CPF, CEP, formato de telefone).
Vantagem: Permite validações complexas que vão além do que os tipos de input nativos podem fazer.

Exemplo 1: Formato de E-mail (Aprofundado)

Embora type="email" faça uma validação básica, o pattern pode refinar o formato.

HTML

<input type="email" name="email_contato" 
       pattern="[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}" 
       required>

Exemplo 2: Padrão de Senha Complexa

Vamos desmembrar a Expressão Regular do seu exemplo para entender a validação:

Snippet de código

(?=.*\d)(?=.*[A-Z]).{8,}

Parte da Regex	Significado
*`(?=.\d)`**	Deve conter pelo menos um dígito (número de 0-9).
*`(?=.[A-Z])`**	Deve conter pelo menos uma letra maiúscula.
`.{8,}`	Deve ter um comprimento mínimo de 8 caracteres.

Código HTML:

HTML

<input type="password" name="senha" 
       pattern="(?=.*\d)(?=.*[A-Z]).{8,}" 
       required>

3. Mensagens de Erro e UX: O Atributo `title`

Quando um pattern falha, a mensagem de erro padrão do navegador pode ser genérica. O atributo title permite fornecer uma dica ao usuário sobre o formato esperado.

Função: Exibe o texto do title quando a validação falha.
Melhor Prática: Descreva o padrão esperado para que o usuário saiba como corrigir o erro.

Exemplo com Feedback de Padrão:

HTML

<input type="password" name="senha" 
       pattern="(?=.*\d)(?=.*[A-Z]).{8,}" 
       required 
       title="A senha deve ter 8+ caracteres, incluir 1 maiúscula e 1 número.">

⚠️ Limitação de title: Embora útil, o title não é a solução ideal para acessibilidade e UX, pois nem sempre é exibido claramente. A melhor prática em ambientes profissionais é usar o HTML5 para a validação básica e o JavaScript para personalizar as mensagens de erro e o feedback visual.

4. Validação por Restrição: Atributos `min`, `max`, `minlength`

Esses atributos de restrição funcionam como validação complementar e dispensam o uso de pattern para limites simples.

Atributo	Uso	Aplica-se a	Exemplo
`min` / `max`	Define valores mínimo e máximo permitidos.	`type="number"`, `type="date"`, etc.	`<input type="number" min="18" max="99">`
`minlength`	Define o número mínimo de caracteres exigido.	`type="text"`, `type="password"`, etc.	`<input type="text" minlength="5">`

5. O Papel do `type="hidden"` na Validação

O campo oculto (type="hidden") não é uma ferramenta de validação direta, mas é essencial para o fluxo de dados em um formulário:

Função: Transmite dados que o usuário não precisa ver ou interagir, mas que são cruciais para o servidor (ex: um ID, um token de segurança ou uma regra de validação).

Exemplo (Metadados para o Servidor):

HTML

<input type="hidden" name="versao_form" value="v2.1">

🛑 Alerta de Segurança: A Validação do Lado do Servidor

A validação HTML é um recurso de UX, não de segurança.

Um usuário malicioso pode desabilitar o JavaScript ou manipular o HTML diretamente para contornar qualquer validação de cliente.
É fundamental que toda validação (obrigatórios, padrões, limites) seja repetida no lado do servidor (com linguagens como PHP, Python, Node.js) antes que os dados sejam processados ou armazenados.

✅ Conclusão Validação de formulário HTML

A validação nativa do HTML5 é um recurso poderoso para criar feedback imediato e amigável ao usuário, usando atributos como required, pattern e os limites de min / max. Ao utilizá-los de forma inteligente e sempre mantendo o foco na segurança do lado do servidor, você pode garantir a integridade dos dados e otimizar a usabilidade do seu formulário.

Toda jornada tem um início, e o início para se tornar um desenvolvedor web é dominar as seguintes tecnologias, que você encontra aqui mesmo: