Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Form Design
Webdesign

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

by
Difficulty:IntermediateLength:ShortLanguages:

Portuguese (Português) translation by Claudia Conceicao (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.)

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:

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.

Se precisas mesmo de completo controlo sobre os estilos de validação, este método pode não ser para ti.

Deixa um comentário

Estou entusiasmado para obter algum feedback sobre isto e adoraria ver alguns estilos/técnicas de validação interessantes.

Crédito onde é devido

Post no blog do Danny King "Adaptive espaços reservados" fez-me pensar nisto.

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.