Leandro Lima

Validando formulários like a boss com HTML5

Por | Comentários: 49

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 tecnologia. Trabalha com UX Design e Design de Interfaces há mais de 8 anos. 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 - LinkedIn

  • Show de bola.

  • Sidney Simpsons

    Muit bom ‘ ^^

  • 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 ?

    • 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.

        • 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

          • 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!

  • 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….

  • Ó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

  • 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!

    • 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!

    • Thiago

      Amigo, tem alguma forma de fazer funcionar no Safari? Valeww

  • 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.

  • tiago pereira

    e como faria para exibir essa mensagem num site multilingual? ou o proprio navegador ja faz essa traducao?

    • Oi Tiago…

      Não, o navegador não faz a tradução. Nos sites multilinguais que eu trabalhei normalmente existe um banco de dados para conteúdo. Neste banco de dados estão os textos nas mais diferentes línguas. A gente só troca o texto por uma variável e chama esta variável no nosso código. ;)

      Boa sorte com o seu projeto…

  • Octavio Leite

    Nota 10

  • Flavio Renato

    Ajudou pacas num lance que fiz hoje. Valeu Leandro!

  • Marcelo VastoLorde

    VLW CARA AJUDO MUITO!!!!!

  • Maikon Ayres Da Silva

    Fantástico! excelente conteúdo, triste por encontrar tarde já, mas feliz por encontrar. Muito bom o conteúdo e a didática dos POSTS. Temas muito bem escolhidos devido a relevância, pois pouco material se encontra na internet com a qualidade e a abordagem tão ampla dos assuntos explorados.

  • Diogo Cezar Teixeira Batista

    Muito bacana ;)

  • Raiuri Santos

    Olá! Estou criando um formulário onde há um campos que devem aceitar números e letras, não estou conseguindo encontrar como posso fazer com que o formulário aceite isso. Alguém poderia me ajudar?

  • Jilcimar Fernandes

    Parabéns pelo material, muito bom!

  • William De Oliveira Ferreira

    tem um capeta dum script injetado em algum lugar deste site pois só nesta página estou sendo redirecionado para vários malwares….

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.