É possível fazer uma quantidade impressionante de validações de formulários e melhorar a UX apenas com atributos HTML e CSS, incrementando bastante a experiência das pessoas que os usam. Neste artigo, veja como aprimorar a UX em validação de formulários com HTML e CSS.

Label parecido com placeholder

Primeiramente: sempre use elementos <label> reais, que são sugestões de entradas válidas ao campo, como colocar “Ex: São Paulo” em um campo “Cidade”, por exemplo.

Nos casos em que o formulário é curto (como um cadastro ou login), seria possível usar o padrão visual de placeholder, mas também é possível usar <label>s reais, como em:

Usa-se o <div> como um contexto de posicionamento com o rótulo diretamente sobre o formulário:

Para mais informações sobre Sass, veja o livro “CSS Eficiente“.

Não é necessário fazer qualquer truque de cursor, porque tudo já fica semanticamente adequado. Se acontece clique na área do rótulo, ele vai ativar a entrada; se é no campo, também. Ambos estão corretos.

O truque é colocar o campo primeiro (sem prejuízos à semântica) para esconder o label no foco, dessa maneira:

UX em validação de formulários: técnica do placeholder

Campos obrigatórios

Talvez a validação mais fácil possível em um formulário seja usar o atributo required para exigir que um campo seja de preenchimento obrigatório. Não há maneira mais rápida de identificar um erro e deixar o navegador fazer o tratamento.

UX em validação de formulários: campos obrigatórios

Indicar positivamente campos válidos

Permita que as pessoas saibam que houve entrada em um campo e esta é válida. Usando CSS, o navegador pode fornecer este tipo de informação através do seletor :valid:

UX em validação de formulários: campos válidos

:valid, nesse caso, é necessário para assegurar que a condição foi satisfeita, mas o seletor também é útil para a validação do tipo de entrada.

Mostrar lembretes sobre o tipo de validação

Também é possível especificar que cada valor de uma entrada seja de um certo tipo, como e-mail ou número (eis exemplos de todos eles).

Essa entrada é necessária para indicar que se trata de um formato de endereço de e-mail válido. É possível fazer isso para melhorar a UX:

  1. Informar às pessoas sobre os requisitos quando o campo está em foco
  2. Lembrá-las que o campo não pode ter qualquer outro valor válido

Mas, também, não mostrar qualquer lembrete quando o campo está vazio. Também, não assumir um estado inválido. É apenas uma espécie de negativo irritante-desnecessário. A fim de fazer isso, é preciso saber se o campo está vazia ou não.

Testando se um campo tem algum valor ou não

É preciso algum trabalho em cima de :valid e :valid, mas não é desejável se antecipar com :valid e usá-lo antes de o campo ter algum valor.

Existe algum seletor CSS para testar se um campo está vazia? Na verdade, não. Muita gente pensa que :empty serve para isso, mas não serve! Ele é para estilizar coisas como <p></p>, ou seja, elementos de contêiner sem nada dentro. Campos de formulário são elementos sem conteúdo por padrão.

O macete é se certificar que a entrada tem um valor de placeholder:

Na demo, não se está usando placeholder, mas o valor de um único espaço funciona:

:placeholder-shown é muito útil neste caso. É, basicamente, um seletor para testar se um campo atualmente tem algum valor ou não.

Infelizmente, no momento não há suporte para Firefox e IE. Com novos recursos como este, @supports é normalmente um salvador, mas…

Não é possível usar @supports para seletores, apenas para propriedades e valores (ex: @supports (display: flex)). Testar placeholders com JavaScript e bastante simples:

Mas não parece ser uma maneira simples para testar :placeholder-shown. Então, a solução para o caso é esperar esperar por um melhor suporte dos navegadores antes de ser usado, efetivamente, em projetos em produção. Depois que isso acontecer, é mais ou menos assim que a coisa será ser feita:

UX em validação de formulários: lembretes de validação

Validações Robustas

Validações diretamente no navegador podem ser feitas não somente com required, type="email" e similares; é possível, também, validar coisas como comprimento (por exemplo, comprimento mínimo de senha ou número máximo de caracteres em textareas) e até mesmo usar expressões regulares.

Por exemplo, caso se queira um campo de senha com os seguintes requisitos:

  1. Mínimo de 6 caracteres
  2. Pelo menos 1 caractere minúsculo
  3. Pelo menos 1 caractere maiúsculo
  4. Pelo menos 1 número

É possível fazer algo como:

UX em validação de formulários: validação robusta

Conclusão das técnicas de UX em validação de formulários com HTML e CSS

Para fixar os conteúdos do artigo, fica uma demo das técnicas e sugestões de UX em validação de formulários com HTML e CSS que foram abordadas — nele, consta :placeholder-shown, o que significa que, na data de publicação deste artigo, não vai funcionar muito bem em Firefox e IE.

See the Pen Form with a bunch of HTML5 Validation and CSS3 Help by Chris Coyier (@chriscoyier) on CodePen.

Juntamente com o que é apresentado no artigo “Melhorando a interação em formulários de busca“, estas técnicas de UX para validação de formulários levarão os forms de seus ao próximos nível.

Lembre-se: estas são técnicas de validação diretamente no navegador que, quando se pensa numa segurança de nível profissional, devem ser usadas juntamente com outras técnicas, inclusive envolvendo o backend.