Validação com pseudo-classes em CSS

Todos já se depararam com aquele formulário "chato" que te obriga a preencher um campo e o marca com um vermelho bem vivo para mostrar o que faltou, ou que o preenchimento está errado. "Errrou!"

É chato, mas é cada vez mais necessário. Não dá mais para receber dados que são inválidos. Isto acaba envolvendo custos altos, principalmente com o avanço do e-commerce e serviços virtuais.

Há hoje diversas ferramentas para facilitar a validação e incluir classes nos formulários para mostrar os erros de modo visual. Vários frameworks e bibliotecas têm essa funcionalidade, nas mais diversas linguagens de programação. Porém, pouco vejo falar da maneira nativa que o CSS oferece para tratar as necessidades mais comuns.

Acredite ou não, o CSS tem pseudo-classes disponíveis apenas para a validação visual de formulários. Se você tiver um código HTML bem feito, usar as pseudo-classes a seu favor vai ser bastante simples.

Como funciona?

Existem atributos no HTML que identificam o tipo do dado que determinado campo aceita, bem como o seu estado e obrigatoriedade de preenchimento. Com base nestes é possível tratar sua aparência.

<!-- Campo de texto com preenchimento obrigatório -->
<input id="nome" type="text" name="nome" value="" required />

Para isto dar certo, é necessário relembrar que não existem apenas botões, checkboxes, radios e campos de textos. Existem ainda outros campos, cada um com suas características e validação própria, mesmo que na aparência sejam iguais a um campo de texto.

Segue abaixo uma lista para relembrar estes campos.

<!-- Campos -->
<input type="text" />
<input type="color" />
<input type="checkbox" />
<input type="date" />
<input type="email" />
<input type="file" />
<input type="month" />
<input type="number" />
<input type="password" />
<input type="radio" />
<input type="reset" />
<input type="search" />
<input type="tel" />
<input type="time" />
<input type="url" />
<input type="week" />

Na lista acima eu não incluí botões, imagem, hidden e range, por não serem úteis a este exemplo. Vamos então às pseudo-classes que podem ser usadas para a validação visual dos campos.

:required

Irá afetar um campo que seja obrigatório, ou seja, que possua o atributo required. Como exemplo, imagine o seguinte HTML

<input id="password" type="password" required />
<label for="password">Senha</label>

Para adicionar um aviso de obrigatório, basta fazer um estilo como este abaixo:

input:required ~ label::after {
  content: " (obrigatório)";
  font-size: 0.8em;
  color: #000;
}

Pronto. Qualquer etiqueta após um campo obrigatório terá um (obrigatório) em seu texto. No exemplo acima, não usei classes, apenas o nome da marcação no CSS, para fins didáticos. Os outros seguirão o mesmo estilo.

:valid e :invalid

Cada campo, como dito anteriormente, possui uma validação feita pelo próprio navegador, de acordo com o seu tipo.

<input id="email" type="email" required />
<label for="email">Endereço de e-mail</label>

No código acima, um campo do tipo "email" é utilizado para um cadastro de e-mail, em vez de um campo de texto normal. Como usamos o campo certo para o dado que será informado, temos a liberdade de usar sua validação padrão para mudar a sua aparência conforme os dados informados:

/* Campo com dados válidos */
input:valid {
  border-color: #090;
}

/* Campo com dados inválidos */
input:invalid {
  border-color: #900;
}

Com os estilos acima, a borda do elemento será verde, caso os dados sejam válidos e vermelho caso não sejam. Vale lembrar que se ele estiver vazio e for obrigatório, será considerado como inválido.

:optional

input:optional {
  border: 1px dashed #ccc;
}

Caso o campo seja opcional, a pseudo-classe :optional pode ser usada para mostrar isso ao usuário de forma visual.

Conclusão

Eis uma amostra do que é possível obter com apenas um pouquinho de CSS:

Talvez você desconhecesse estas pseudo-classes ou apenas nunca as tenha usado. O fato é que elas têm a sua utilidade. Claro que isto é apenas a parte visual da validação do formulário. O CSS não vai checar os dados antes do seu envio. Até porque se isso acontecer um dia, eu vou ficar preocupado!

Há limitações caso os dados que vão ser enviados sejam muito específicos como número de documentos ou cartões, por exemplo. Sendo assim, use a ferramenta de validação de sua preferência: o bom disso é que você vai usá-la apenas onde você realmente precisa, tirando lógica desnecessária do seu projeto.

O foco será mais na checagem dos dados e mensagens informativas do que na aparência.

dois:pontos