Leandro Lima

Validando formulários like a boss com HTML5

Por | Comentários: 35

Validar formulários sempre foi uma prática fundamental para o desenvolvimento web seja por questões de segurança, organização de banco de dados ou até para evitar a perda de tempo na hora de filtrar entre dezenas de mensagens spam. Saiba como fazer isso like a boss, usando HTML5.

Alguns dados como números de CPF, telefones e emails precisam de uma formatação específica. Verificar se o campo está ou não está preenchido também é uma tarefa comum e todo desenvolvedor já teve que fazer algo do tipo. As validações client-side eram feitas por JavaScript, pois não existia uma maneira nativa de fazer isso no HTML… até agora!

Em HTML5 existem atributos que irão validar o formulário no momento em que o usuário clicar para submete-lo, como o min, max, pattern, step e required além dos já conhecidos Type e Maxlenght.

A compatibilidade destes elementos até o momento é com os browsers Firefox 15+, Chrome 23.0+, Safari 5.1+, Opera 12+ e IE10. Além dos navegadores mobile Opera, Chrome e Safari.

Como existe uma quantidade considerável de usuários de IE9, é importante ter um fallback de JavaScript e/ou PHP. No entanto, em um futuro perfeito (e espero que não muito distante), todas as pessoas usarão as versões mais modernas dos browsers e poderemos desfrutar das novas tecnologias sem medo. Yei!

Vamos conhecer agora um pouco mais sobre cada um destes novos atributos.

Required

Este é o atributo básico para mostrar que o campo de formulário é de preenchimento obrigatório.

Ao clicar em Submit sem preencher o formulário, o usuário receberá a mensagem que o campo deve ser preenchido para que o conteúdo seja enviado.

Exemplos nos principais navegadores.

Pattern

No atributo Pattern nós usamos uma Expressão Regular para determinar qual padrão de preenchimento o formulário deve seguir.

Por exemplo: se quero um formulário em que o usuário escreve uma sequência de 3 números e 3 letras em Uppercase, uso o seguinte pattern:

Neste outro exemplo, o usuário deverá colocar um número decimal, onde ele usa a vírgula como separador e duas casas decimais:

Min e Max

Através destes dois atributos, podemos definir valores mínimos e máximos para o nosso campo de formulário.

Exemplo: em um formulário em que o usuário não pode colocar um valor maior do que 10, eu uso o atributo Max da seguinte forma:

Podemos combinar e usar um valor mínimo junto com o valor máximo. No caso acima, o formulário aceitaria números negativos. Mas, se eu colocar o Min como 1 e o Max como 9, ele aceitará apenas números entre 1 e 9.

Posso usar isso combinado com formulários do tipo “date” e assim colocar uma data máxima e mínima que pode ser preenchida. Por exemplo:

Neste caso, o meu campo de formulário aceitará apenas datas após 31 de dezembro de 1979. Em alguns navegadores, como o Chrome, usar o type=”date” faz com que o formulário tenha um seletor de datas, facilitando bastante a vida do usuário.

Um outro exemplo de uso é colocar a data com um valor máximo. Por exemplo, quero que apenas maiores de 18 anos se cadastrem no meu site. Uso o atributo Max para falar que apenas pessoas nascidas antes de um determinado ano (no caso de 2013, apenas pessoas nascidas antes de 1995) poderão submeter o formulário.

O atributo Min e Max apenas serão aceitos em formulários com valores numéricos ou datas.

Step

Quando eu determino que o meu atributo Type é Number, nos navegadores webkit, duas setinhas aparecerão para que eu possa aumentar ou diminuir o valor numérico. Quando eu uso o atributo Step, ele irá aumentar ou diminuir isso seguindo um determinado intervalo. E, para validar o formulário, deverá ser um numeral dentro desta sequência que eu determinei.

Por exemplo, se eu criei um formulário numérico com o valor mínimo de 0 e o máximo de 10 com o step de 0.5, ele não irá validar caso o valor deste campo seja 0.3, ou 1.8. A validação irá apenas funcionar se forem valores entre 0 e 10, mas que passem pelo intervalo de 0.5, ou sejá, irá validar se for 0.5, 1, 1.5, 2 e assim por diante.

Personalizando a mensagem de erro.

Caso eu não determine qual a mensagem que será visualizada quando o formulário não for validado, o navegador exibirá uma mensagem padrão, normalmente na linguagem do browser do usuário. Mas, é interessante termos o controle total da mensagem. Para isso, eu posso usar o atributo Title. O texto que eu determinei neste atributo será o que aparecerá para meu usuário quando ele digitar um valor não válido para o meu campo.

Veja o exemplo:

É importante lembrar que esta mensagem não substitui a mensagem padrão do browser, apenas aparece junto com ela explicando o que há de errado.

Foi proposto um atributo para editar a mensagem por completo, mas ainda não foi aceito pela W3C. Até o momento, apenas no Firefox é possível declarar uma mensagem de erro 100% personalizada sem a necessidade de JavaScript, usando o atributo x-moz-errormessage

Caso mudar a mensagem padrão de erro seja algo fundamental para seu projeto (acredito que é, na maioria deles), você pode usar um JavaScript para isso. Veja o exemplo:

Customizando o Visual da Mensagem de Erro

Quanto ao visual do popup com a mensagem de erro, apenas em browsers webkit é possível customiza-la através de CSS. Para isso, usamos os seguintes seletores:

As pseudo-classes :valid e :invalid

É interessante, do ponto de vista da UX, ocorrer mudanças visuais nos elementos da interface que indiquem em tempo real se o preenchimento do formulário esta correto ou apresenta erros. Para isso, temos as pseudo-classes :valid e :invalid.

Como o próprio nome ja diz, o seletor :valid irá estilizar o formulário que foi preenchido de maneira correta e o :invalid o que foi preenchido incorretamente.

Veja o exemplo:

É um cuidado interessante de se ter, pois cada navegador seguirá seu próprio padrão para indicar que o campo foi ou não preenchido corretamente. Porém, manter uma unidade em todos os browsers é sempre bom.

Browsers antigos

Por ser uma funcionalidade nova do HTML5, browsers mais antigos como o IE8 ou alguns browsers mobile, como o navegador padrão do Android não aceitam esta validação. Para isso, temos duas soluções rápidas.

A primeira seria uma validações server-side em alguma linguagem de programação como PHP, por exemplo. Este tipo de validação é útil pois garante uma maior segurança dos dados e do próprio servidor. O ponto fraco, neste caso, é não ser uma solução que pode ser visualizada em tempo real.  Eu, pessoalmente, acredito que os dois lados (client e server-side) podem trabalhar de maneira conjunta.  Apesar dos validadores em HTML5 funcionarem muito bem, uma validação server-side pode parar usuários mal intencionados e impedí-los de fazer qualquer besteira em seu servidor. Apenas isso já seria o bastante para atender todos os browsers, afinal, mesmo um usuário de navegadores antigos teria seus formulários validados. É um caso de Progressive Enhancement. O formulário sempre será validado. Em um caso, em tempo real. Mas, se isso não funcionar, temos o backup da validação server-side. A funcionalidade estará garantida.

A segunda opção é termos um fallback via JavaScript, atendendo apenas browsers mais antigos.

Conclusão

Validações de formulário são sempre importantes, e fazer isso em tempo real torna a experiência do usuário mais imersiva e interessante. Formulários longos e cansativos muitas vezes levam a dispersão e até em eventual desistência por parte do usuário. (Quem nunca se irritou após só descobrir que um campo de um formulário longo era obrigatório depois de apretar o botão “enviar”?). Até então a melhor maneira de fazer isto era utilizando JavaScript, mas estes novos atributos de HTML5 realmente facilitam muito o trabalho e tornam o código mais leve por não ter a dependência do JS.

É claro que existem browsers que ainda não suportam este novo tipo de validação de formulário, como o IE8, e isso mantém a necessidade de um fallback. No entanto, mesmo que não houvesse os problemas de compatibilidade, acredito que uma validação no servidor via PHP, ASP ou qualquer outra linguagem de programação é fundamental para a segurança do projeto. Não devemos ter receio de usar estes novos atributos em HTML5, já que todos os navegadores modernos dão suporte a eles. Afinal, a tendência é o usuário ser forçado a se atualizar com o tempo. Usando o que há de mais novo em tecnologias web nós estamos deixando nossos códigos preparados para o futuro.

Tags: > , , , ,

Leandro Lima

Leandro Lima

Designer, palestrante, nerd e co-fundador da PopUp junto com a Dani Guerrato. É apaixonado por criatividade e trabalha, principalmente, com identidade visual e projetos para web, se responsabilizando pelo design e pelo desenvolvimento de projetos da PopUp. Adora jogar xadrez, é fã do Rubens Barrichello e acredita que o universo tem 10 ou 11 dimensões.

Você pode achar o Leandro por aqui: Facebook - Twitter - - Instagram

  • http://labs.webdiastutoriais.com/ Hugo Dias

    Show de bola.

  • Sidney Simpsons

    Muit bom ‘ ^^

  • http://www.facebook.com/dougkbox Doug Fernandes

    Curti bastante as dicas.

  • Leonel

    Parabéns

  • Demetrius

    Muito bom artigo!

  • MaxMax

    Muito bom Leandro, simples e direto. queria somente tirar uma dúvida, existe como fazer uma validação condicional? por exemplo, um campo somente passa a ser requerido se um checkbox tiver marcado ?

    • http://www.popupdesign.com.br/ Leandro Lima

      Oi Max.

      Então, li a documentação sobre essa validação e não achei nada sobre Checkbox. Se eu encontrar algo, posto aqui para você.

      Abraço,

      • MaxMax

        Ola Leandro, grato.

        • http://www.facebook.com/maykel.esser Maykel Esser

          Cara, desculpe a intromissão, não fiz o teste mas acho ser possível fazendo uma condicional in-time no jQuery:

          – se o checkbox for preenchido:
          – adiciona o atributo required (ex. $(this).attr(“required”,”required”);
          – senão
          – remove o atributo (ex. $(this).removeAttr(“required”))

          • MaxMax

            Maykel, deve funcionar sim, vou testar, é que eu queria saber se existia algum parametro html5 para isso, abs

          • http://www.popupdesign.com.br/ Leandro Lima

            Obrigado Maykel!
            É possível sim fazer via jQuery. Agora, usando apenas HTML5, eu não encontrei ainda.

            Mas, obrigado pela ajuda! ;)

    • Fabio Soares

      O atributo ‘required’ não funciona?

  • Neto

    Sensacional, parabéns!

  • marquim.rcc

    Showww d+.

    Agora eh partir p pratica o

  • Fabio Soares

    Internet Explorer, sempre dificultando a nossa vida.

  • Vitor Hidalgo

    Ótimo artigo! Parabéns!

  • http://luanpiegas.com/ Luan Piegas

    Muito bom, cara!

  • Naldo Herculino

    Muito bom artigo.

  • Reinaldo Nunes

    Muito bom mesmo. Só acho que uma coisa seria bem interessante também, além do artigo explicativo: link para exemplos. Isso agrega bastante, ao meu ver.

    No mais, show!!

  • Alex Domingos Silva

    Muito bom estas dicas me ajudou muito , quando surgir conteúdos diferente manda uma mensagem de alerta….

    • http://www.popupdesign.com.br/ Dani Guerrato

      Oi Alex,
      Você pode acompanhar as postagens do blog utilizando Feeds RSS ou ficar de olho em nossas atualizações no Facebook: http://www.facebook.com/vai.popup

      Um abraço!

  • http://www.newstechbrasil.com.br Isaias Lima

    Ótima dica

  • Rômulo Innocêncio

    Massa, curti o ‘validamento’ hahaha =)

  • Cleyton Silva

    Muito bem explicado. Obrigado.

  • Bruno Vaz

    Muito boa a postagem. Seguinte: quando utilizo o input:invalid, ele deixa os campos obrigatórios “vermelhos”(no caso da minha configuração) por padrão, tem alguma forma dos campos inválidos só ficarem vermelhos depois que o usuário clicar no botão de submit?

    • Bruno Vaz

      Utilizando input:invalid:focus consegui amenizar o efeito visual, agora os campos ficam vermelhos somente quando selecionados, quando o usuário abre a página todos os campos ficam com a borda inferior cinza, como padrão.

      Como ficou: http://i.imgur.com/Bqd7AC0.gif

  • http://danielfarias.net Daniel Farias

    Pessoal, tem como personalizar a própria mensagem de alerta do navegador. Vejam abaixo um exemplo:

    Agora é só mudar a frase ‘Por favor, digite seu nome.’ para o que desejarem. Valeu!

    • http://www.euprecisoregistrarum.com Eric Castro

      Boa Daniel, eu testei no Chrome e no IE funcionou, Valeu! …ps: porém se você tentar enviar o formulário e um campo esta inválido mesmo que você corrija com um valor válido , ele continua dizendo que o valor não e válido e não envia o formulário :(

      • Josué Rodrigues

        Voce usou o onchange=”try{setCustomValidity(”)}catch(e){}” ??

      • Josué Rodrigues

        Não esquece de usar isso, onchange=”try{setCustomValidity(”)}catch(e){}”

    • Josué Rodrigues

      Muito bom esse jeito de personalizar a mensagem de alerta!

  • Bruna

    Muito bom! Como faço para validar o e-mail ? que contenham o @

  • Mateus Schroeder

    Dicas preciosas, mas, jamais deixem de validar algo no servidor também. Em se tratando de exp do usuário, nota 10!

  • Josué Rodrigues

    Esse artigo me ajudou muito a validar e-mail no cliente sem precisar de JavaScript.
    :)

  • JesusSeguraCO

    Gracias. Esta explicación me ha sido de gran ayuda.

Postamos coisas legais aqui


Google

Adicione no GOOGLE+

Instagram

Siga nosso perfil no INSTAGRAM

Quer utilizar o conteúdo do BlogUp?

Gostamos de compartilhar conhecimento por isto os textos sa seção Blog são licenciado sob Creative Commons com as condições: Atribuição - Não Comercial - CompartilhaIgual.

Em português claro, você pode reproduzir este artigo se cumprir TODOS os requisitos:
1. Ninguém esteja lucrando nada em função disto.
2. Exista crédito para a PopUp Design e o autor do post em um local claro com link para o conteúdo original.
3. O material derivado seja distribuido da mesma maneira.

Obs 1. Leia a licença completa para entender todos os termos.
Obs 2. Se o seu site tiver qualquer tipo de anúncio, como AdSence, por exemplo, isto já é considerado fim comercial e portanto você não pode reproduzir o texto.
Obs 3. Se você gostaria de utilizar este material sob outros termos e/ou possui dúvidas envie um e-mail contato@popupdesign.com.br e requisite uma autorização.