Validação nativa de formulários: required, min, max e pattern

Aprenda a usar atributos HTML para validar os dados antes do envio — como exigir campos obrigatórios e definir formatos aceitos.

Um dos maiores desafios ao coletar dados de usuários é garantir que as informações fornecidas sejam válidas e estejam no formato esperado. Antigamente, isso exigia muito JavaScript. Felizmente, o HTML5 trouxe uma série de atributos de validação nativa que permitem validar formulários diretamente no navegador, antes mesmo que os dados sejam enviados ao servidor.

Isso melhora a experiência do usuário, pois ele recebe feedback instantâneo, e reduz a necessidade de código JavaScript complexo para validações básicas.

O que é validação nativa?

É a capacidade do navegador de verificar se os dados inseridos em um campo de formulário atendem a certos critérios definidos por atributos HTML. Se os critérios não forem atendidos, o navegador impede o envio do formulário e exibe uma mensagem de erro padrão.

Atributos de validação nativa

1. required

  • Função: Torna o campo obrigatório. O usuário deve preenchê-lo para que o formulário possa ser enviado.
  • Compatibilidade: Funciona com a maioria dos tipos de <input>, <textarea> e <select>.
  • Exemplo:
    <label for="nome">Nome:</label>
    <input type="text" id="nome" name="nome_usuario" required>

    <label for="mensagem">Mensagem:</label>
    <textarea id="mensagem" name="texto_mensagem" required></textarea>

    <label for="cidade">Cidade:</label>
    <select id="cidade" name="cidade_usuario" required>
      <option value="">-- Selecione --</option>
      <option value="sp">São Paulo</option>
    </select>

2. min e max

  • Função: Definem os valores mínimo e máximo aceitáveis para um campo.
  • Compatibilidade: Principalmente com type="number", type="range", type="date", type="time", type="datetime-local".
  • Exemplo:
    <label for="idade">Idade (entre 18 e 99):</label>
    <input type="number" id="idade" name="idade_usuario" min="18" max="99" required>

    <label for="data_evento">Data do Evento (a partir de hoje):</label>
    <input type="date" id="data_evento" name="data_evento" min="2026-05-29" required>

3. minlength e maxlength

  • Função: Definem o número mínimo e máximo de caracteres permitidos em um campo de texto.
  • Compatibilidade: Com type="text", type="search", type="url", type="tel", type="email" e <textarea>.
  • Exemplo:
    <label for="usuario">Nome de Usuário (mín. 5, máx. 15 caracteres):</label>
    <input type="text" id="usuario" name="nome_usuario" minlength="5" maxlength="15" required>

    <label for="comentario">Comentário (mín. 10, máx. 200 caracteres):</label>
    <textarea id="comentario" name="texto_comentario" minlength="10" maxlength="200" required></textarea>

4. pattern

  • Função: Permite definir uma expressão regular (regex) que o valor do campo deve corresponder. É a validação mais poderosa.
  • Compatibilidade: Com type="text", type="search", type="url", type="tel", type="email", type="password".
  • Dica: Use o atributo title para fornecer uma dica ao usuário sobre o formato esperado, pois a mensagem de erro padrão do navegador pode não ser muito clara.
  • Exemplo:
    <label for="cep">CEP (formato XXXXX-XXX):</label>
    <input type="text" id="cep" name="cep_usuario" pattern="^\d{5}-\d{3}$" title="Formato: 00000-000" required>

    <label for="placa">Placa de Carro (formato AAA-0000):</label>
    <input type="text" id="placa" name="placa_carro" pattern="^[A-Z]{3}-\d{4}$" title="Formato: AAA-0000" required>

Entendendo a regex ^\d{5}-\d{3}$ para CEP:

  • ^: Início da string.
  • \d{5}: Exatamente 5 dígitos (0-9).
  • -: O caractere hífen literal.
  • \d{3}: Exatamente 3 dígitos.
  • $: Fim da string. Isso garante que o CEP tenha exatamente 5 dígitos, um hífen e 3 dígitos.

Outras validações nativas

  • type="email": Valida o formato básico de e-mail.
  • type="url": Valida o formato básico de URL.
  • type="number": Valida que o valor seja um número.
  • type="date": Valida que o valor seja uma data válida.

Como a validação nativa funciona

  1. Quando o usuário tenta enviar o formulário, o navegador verifica todos os campos com atributos de validação.
  2. Se um campo não atender aos critérios, o navegador:
    • Impede o envio do formulário.
    • Foca no primeiro campo inválido.
    • Exibe uma mensagem de erro padrão (que pode variar entre navegadores e sistemas operacionais).
    • Adiciona pseudo-classes CSS (ex: :invalid, :valid) que podem ser usadas para estilizar os campos.

Importante: Validação no lado do servidor

A validação nativa do HTML é uma primeira linha de defesa e uma grande melhoria na experiência do usuário. No entanto, ela nunca substitui a validação no lado do servidor.

  • Usuários podem desabilitar JavaScript (e, em alguns casos, ignorar a validação nativa).
  • Dados maliciosos podem ser enviados diretamente ao servidor sem passar pelo formulário HTML.

Sempre valide os dados no servidor! A validação nativa é um complemento, não um substituto.

Resumindo

  • A validação nativa do HTML5 permite validar formulários diretamente no navegador.
  • required: Torna o campo obrigatório.
  • min e max: Definem valores mínimo e máximo (para números, datas, etc.).
  • minlength e maxlength: Definem o número mínimo e máximo de caracteres (para texto).
  • pattern: Permite validar o campo contra uma expressão regular. Use title para dar uma dica ao usuário.
  • Tipos como email, url, number, date já possuem validação de formato.
  • A validação nativa melhora a UX, mas não substitui a validação no servidor.