Como fazer labels de inputs flutuantes com validação de HTML5

() translation by (you can also view the original English article)

TL;DR Substitui a tua validação de JavaScript por validação HTML5. É mais fácil do que tu pensas, e dá-te muito controlo de markup e de estilo. Experimenta esta demo:

O que estamos a fazer aqui

Precisas de validar o teu formulário. Fazes a coisa certa e começas com a validação do lado do servidor. Depois, se és um bom designer web, adicionas alguma validação do lado do cliente para que os teus utilizadores recebam feedback sobre se estão a preencher corretamente o formulário ou não. Se fores realmente um bom designer web até podes fazer com que esse feedback seja instantâneo, assim o utilizador é informado que inseriu um endereço de email válido assim que esse se torna um endereço de email válido.

Recorre à tua biblioteca jQuery favorita. Talvez até estejas à vontade o suficiente para usar a biblioteca de JavaScript vanilla.

Adicionas algum markup extra. Dá de novo estilo a algumas coisas... adiciona algumas regras de validação JavaScript. Liga o javaScript ao servidor via AJAX. Bate com a tua cabeça contra o teclado algumas vezes porque não fizeste isso em alguns meses e tens que procurar exatamente como essa nova biblioteca de validação JavaScript faz coisas... E assim por diante.

Percebeste a ideia. Não é divertido.

E se pudesses omitir toda essa parte de JavaScript e apenas validar com atributos validadores HTML5 e CSS?

O que é a validação HTML5 de formulário?

De grosso modo: adicionas atributos como required or type="email" aos campos de <input> e o teu browser faz o resto.

Avança e tenta submeter o formulário nesta demo CodePen sem conteúdo. Depois tenta submete-lo sem um endereço de email inválido.

Padrões Regex

Deves ter notado que podes inserir um email como a@a. Claramente tu queres um endereço de e-mail real, então ao especificar um padrão específico que a nossa informação deve corresponder, podemos validar o que é inserido. Vamos certificar-nos que corresponde ao padrão de ter um ponto e dois ou três caracteres no final. Podemos fazer isto usando o atributo pattern e regex.

Se estás hesitante em aprender regex tens que superar isso. Regex é insanamente poderoso e em cada tipo de programação irás sempre fazê-lo.

Eu sou terrível em regez complicado então procurei no Google por "email regex" (visto que tenho a certeza que isto já foi resolvido) e acabei por encontrar uma em regular-expressions.info. Aqui está o nosso regex em regex101.com (um recurso muito útil para testar as tuas expressões regulares.)

1	^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$

Se leres um pouco sobre o padrão irás perceber que o autor excluiu as correspondências de minúsculas porque eles esperam que tu uses uma referência não sensível as letras maiúsculas/minúsculas. Os padrões de input HTML5 não aceitam referências então para obter letras minúsculas temos que adicionar a gama de letras maiúsculas e minúsculas (por exemplo A-Za-z). Podes ler exatamente o que é que cada parte do padrão faz no painel correto.

Para fazer com que os nossos erros de validação retornem algo diferente de "Formato errado!" podemos especificar o atributo título com um erro de validação como:

1	<input type="email" placeholder="Email" required pattern="^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$" title="Please enter a valid email.">

Agora tenta o input email nesta demo:

Não te preocupes, não terás que escrever padrões absurdos para cada input que tens. Na maior parte das vezes só vais querer precisar de alguma coisa e certificar-te que é o tipo de informação correto. Por exemplo, um número maior que 5 pode parecer-se como <input type="number" min="5" required>.

Tem em conta que nem todos os browsers suportam toda a variedade de atributos de validação. Por exemplo, o FireFox não suporte minlength. padrão tem um apoio muito bom, assim podes sempre replicar a funcionalidade. minlength pode ser replicado com pattern=".{3,}" onde 3 é o quão longo ele precisa ser.

Se não consegues encontrar um padrão ao qual tiveste acesso no tua biblioteca de JavaScript antiga, podes provavelmente encontrá-la ao procurar o código fonte, pois finalmente a biblioteca de JavaScript corresponde aos mesmos padrões de regex que nós estamos.

Feedback instantâneo

Não seria bom se o nosso input mostrasse algum tipo de indicação quando estivesse válido? Felizmente, existe o selector de CSS :valid para isso. Também existe o selector :invalid. Introduz o teu nome para esta demo:

Vais reparar o aviso óbvio que os estilos inválidos aparecem mesmo antes de teres clickado no input.

Podes pensar em fazer alguma coisa como :invalid:not(:empty) mas não vai funcionar porque os browsers são estúpidos e consideram sempre os elementos de formulário vazios.

Poderíamos fazer alguns truques com o novo pseudo-selector :placeholder-shown como é mostrado na seguinte demo, mas o suporte do browser para :placeholder-shown é horrível e ainda não há um polyfill moderno para isso. Chatice.

Por agora, a nossa melhor aposta é adicionar algum JavaScript para alternar uma classe dependendo se o input está vazio ou não. Aqui está uma demo funcional:

Fazendo-a maravilhosa

A minha parte favorita sobre esta abordagem é o fato de teres completo controlo de CSS sobre cada bocado do teu formulário.

Ao empurrar a <span> para baixo de <input> ganhamos acesso ao selector irmão adjacente na nossa class .empty. Depois podemos criar um espaço reservado faux que maravilhosamente desliza fora do caminho, assim que a entrada não está mais vazia. Aqui está um exemplo:

Se a <span> estando por baixo do <input> ofende as tuas sensibilidades ou não é suficientemente acessível, podes sempre ajustar o JavaScript para adicionar a classe empty à <label>. Depois, é so uma questão de trocar um pouco o CSS. Aqui está um exemplo fazendo dessa forma:

As classes de validação também funcionam no elemento <form> então podes ficar louco com o controlo so estilo.

Não há limite para o que tu podes fazer com esta abordagem. Algumas ideias:

Adiciona ícones de validação que desvanecem.
Abana o input se o utilizador clica fora do input e esse não é válido.
Reduz os inputs assim que estão preenchidos correctamente.

Suporte do Browser

Perfeito em browsers modernos e no IE10+.
IE9- não suporta pseudo selectores de validação por isso não irás obter o estilo mas ainda assim as funções do formulário funcionam muito bem.

Possível limitação

Não há nenhuma forma de dr estilo às mensagens de validação. Os browsers desativaram a possibilidade de dar estilo a essas. Eu não penso necessariamente que isto é uma coisa má tendo em conta que as pessoas irão usar esses estilos de validação. De facto, é provavelmente a razão pela quais os browsers decidiram retirar acesso a eles. Agora eles estão padronizados.

Eles estão também fora do fluxo da página, por isso não precisas de te preocupar se empurram os elementos de formulário e alteram a sua aparência.