Validando formulários apenas com html5

html5

Validar formulários é chato, tedioso e trabalhoso. Felizmente alguém olhou isso e resolveu incluir dentro da especificação do html, alguns atributos e valores novos muito interessantes.

Se usarmos corretamente, e estudarmos Expressões Regulares, é possível fazer uma validação simples sem escrever nenhuma linha de javascript. Vou deixar abaixo alguns snippets da tag input, utilizando o type correto (veja aqui todos os types novos da html5) e um uso do atributo pattern para os qual eu escrevi algunms ERs.

Apenas letras

<input type="text" required="required" name="text" pattern="[a-z\s]+$" />

Apenas números

<input type="text" required="required" name="numbers" pattern="[0-9]+$" />

Data

<input type="date" required="required" maxlength="10" name="date" pattern="[0-9]{2}\/[0-9]{2}\/[0-9]{4}$" min="2012-01-01" max="2014-02-18" />

Hora

<input type="time" required="required" maxlength="8" name="hour" pattern="[0-9]{2}:[0-9]{2} [0-9]{2}$" />

Campos genéricos de texto

<input type="text" required="required" name="name" />

Telefone

<input type="tel" required="required" maxlength="15" name="phone" pattern="\([0-9]{2}\) [0-9]{4,6}-[0-9]{3,4}$" />

Email

<input type="email" required="required" class="input-text" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" />

Moeda

<input type="tel" required="required" maxlength="15" name="valor" pattern="([0-9]{1,3}\.)?[0-9]{1,3},[0-9]{2}$" />

Utilizei o type=”tel”, pq em celulares renderiza melhor o teclado.

Input file

<input type="file" name="file" accept="image/*" required="required" />

placeholder

Lembre-se de usar o placeholder nos seus campos em que você precise “dar alguma dica” para o usuário de como ele deve preenchê-lo

Estilizar os inputs

Faça testes utilizando as pseudo classes

input:required:invalid {}
input:required:valid {}

Personalizar as mensagens de erro

Encontrei este artigo bem completo e interessante: Validando formulários like a boss com HTML5. Onde é mostrado o atributo: required x-moz-errormessage=”Ops. Não esqueça de preencher este campo.”, logicamente exclusivo do Firefox.

E para webkit, o css:

::-webkit-validation-bubble {/*Insira aqui seu CSS.*/}
::-webkit-validation-bubble-message {}
::-webkit-validation-bubble-arrow {}
::-webkit-validation-bubble-arrow-clipper {}

That’s all folks!

Em alguns inputs, mesmo com o type definido, eu forcei a validação no pattern, pois um pode ser implementado sem o outro pelos browsers, e existe um “bug” no type email, em que no Chrome ele aceita um email do tipo: email@a, sem obrigar que o cliente informe o domínio do site. (.com, .net…)

Comente caso use algum, ou tenha outro para sugerir!!

81 Comments

  1. Em alguns inputs, mesmo com o type definido, eu forcei a validação no pattern, pois um pode ser implementado sem o outro pelos browsers, e existe um “bug” no type email, em que no Chrome ele aceita um email do tipo: email@a, sem obrigar que o cliente informe o domínio do site. (.com, .net…)

    • Guilherme Arantes

      março 22, 2017 at 00:51

      Não existe nenhum “bug”! Existem domínios sem o .com ou .com.br

      Faça um simples teste e acesse o site do Bradesco através do endereço: bradesco.bradesco

      Isso não é um “bug”, o chrome permite isso, pois é perfeitamente normal. Do contrário, vocês estão cancelando a possibilidade de que algumas pessoas se cadastrem no sistema.

  2. O seu post sobre validadores de form com html5 me ajudou muito, gostaria de saber se vc pode me ajudar a criar um para valores monetarios….

    • Cara, tenta com esse:

      <input type="text" required="required" maxlength="15" name="valor" pattern="([0-9]{1,3}\.)?[0-9]{1,3},[0-9]{2}$" />

      aceita no mínimo:
      0,00
      e no máximo
      000.000,00

  3. Olá Bruno,
    não entendo nadinha de nada de site. Mesmo assim, pesquisando e futucando, consegui chegar a esse site.
    Porém, ao publicar, o mesmo dá erro no formulário.
    Voce pode me ajudar? o que está acontecendo?

  4. E para campo FILE? Aplica apenas required=”required” ?

  5. Ola, primeiramente parabéns pelo post!!!
    Bom…estou fazendo um formulário com campos obrigatórios e dois botoes: um para gravar e outro para voltar. Porem em ambos ao clicar ele solicita a obrigatoriedade. Tem como eu tirar essa obrigatoriedade de preenchimento do botão de voltar. Muito obrigada

  6. Bruno Quadros

    abril 23, 2015 at 11:12

    Fala ae Bruno,gostaria de saber como utilizo o requires em campos
    com mascara js.
    Abraços!

  7. Só letras;
    pattern=”[A-Z\s][a-z\s]+$”

  8. Muito interessante, mas sem uma mascara de campo para guiar o usuário a preencher determinados campos esse tipo de validação pode ser uma dor de cabeça

  9. Opa, ja estava usando alguns desses novos mesmo sem saber que eram html5. Muito bacana esta esclarecida.
    Infelizmente ainda nao tive tempo pra estudar javascript e por isso fico na dependencia de scripts prontos.
    Vc poderia me ajudar a validar telefones de celular japones?
    o padrao eh:

    090 1234 5678 ou
    080 1234 5678 ou
    070 1234 5678

    grato

  10. Show, adorei, muito bem explicado, parabéns!

  11. Opa William Bruno, blz?

    Muito boa sua explicação, já uso ela como referencia a muito tempo e hoje tenho uma dúvida:

    Como fazer o regex para aceitar telefones com 8 e 9 dígitos?

    Por exemplo, aceitar somente:
    (61) 9999-9999
    e
    (61) 9999-99999

    Valeu

  12. Bruno, comigo não ta funcionando, eu to usando html5 pra validar e ajax. Quando eu envio o formulário aparece uma mensagem do html5 pra preencher o campo e envia a mensagem assim mesmo, tu sabe como resolver?

  13. Olá Bruno, e no caso da placa de carro 3 letras – 4 números?

  14. Luiz Gustavo

    julho 9, 2015 at 13:44

    Parabens Bruno Ótimo post, como faria pra validar um campo e-mail porem somente um domino ex.: @teste.com.br?
    tentei mas não me dou bem com expressões regulares:
    [a-z.]@[teste]{5}+\.[com]{3}+\.[br]{2}$

    Desde já obrigado!

  15. Olá Bruno,
    Você poderia sugerir uma ER contra códigos maliciosos ou que evite o envio de caracteres especiais mal intencionados ?

    Desde já agradeço e parabéns pelas dicas !

    Abraço.

  16. Fala irmão, tudo certo?
    minha duvida é a seguinte…
    tenho a validação de telefone nesse formato:
    (00) 9999-9999
    com esse código,
    pattern=”\([0-9]{2}\)?[s][0-9]{4,5}-[0-9]{4}$”
    porem gostaria de permitir que o usuário pudesse digitar tanto com espaço após parenteses quanto sem, dessa forma:
    (00) 9999-9999
    (00)9999-9999

    Teria como fazer isso?
    aguardo resposta, e valeu! abraço.

  17. Só não esqueçam de validar também no PHP, tem gente que esquece de validar no PHP e deixa o sistema inseguro

  18. Muito bom jovem!

  19. Parabéns! Me ajudou muuuito!
    E para anexar PDF, JPEG ou DOC?

  20. Pessoal, como colocar o aviso de erro pra cima do input e não pra baixo ? Alguém sabe alguma alternativa ?

  21. “Como faço pro campo tipo text aceitar acentos?
    por Lucas — agosto 4, 2015 @ 08:45”

    coloca assim:
    deve ajudar

  22. Minha duvida, usei o este código
    [code] [/code]

    em um formulário que já tinha, abri no navegador Google Chrome no campo apareceu uma caixa suspensa, era para fica só o campo ao digitar aparecer as ##/##/####
    não sei porque. 🙁

  23. Isso só funciona com PHP? porque estou tentando validar um formulário só com números e não dá certo.. continua aceitando letras, mas é arquivo ASP.
    Sou designer e não programador, por isso a pergunta meio de leigo. valeu!

  24. Estou usando um código que está dando certo dentro do input :

    onKeypress=”if (event.keyCode 57) event.returnValue = false;”

    mas gostaria de saber porque o pattern não funcionou no meu código.. valeu

  25. Muito obrigado Willian,voce merece um 10 ,sua iniciativa foi muito bacana em ensinar quem não sabe !
    Grande Abraço,que DEUS o abençoe.

  26. Luís Antonio

    agosto 28, 2015 at 17:59

    Olá, Bruno. Como faço para validar telefones tanto fixo, com 8 dígitos, quanto celular com 9 dígitos, no mesmo campo?

  27. Boa tarde, eu tenho uma loja de informática e fiz um site a algum tempo bem básico pois não manjo nada de html, porem tenho um problema desde que fiz o site, eu fiz um formulário para as pessoas entrarem em contato comigo só que esse formulário se você clicar em enviar mesmo sem preencher nada ele enviar o e-mail com ele vazio você poderia me ajudar a fazer esse checagem ou me indicar algum lugar que tenha como fazer isso, mais tem que ser alguma coisa bem leiga pois não manjo nada de html

    Se puder me ajudar fico agradecido desde já obrigado e parabéns pelo site

    • Adiciona o atributo required nos campos que você quer que preencham. Simples assim.

    • muito obrigado, segui as suas dicas e consegui fazer tudo certinho ainda coloquei ate mais coisas que aprendi com o seu post ai, continue compartilhando seu conhecimento e sendo esse cara que ajuda os desconhecidos fique com deus abraço

  28. Testei todos os pattern=” ” e nenhum funcionou

  29. Boa tarde pessoal!
    Eu sou novato nessa questão de desenvolvimento Web, e gostaria de pedir ajuda. Estou tendo problemas com validação de formularios. Tenho um campo tipo text e gostaria de validar para receber somente testo.
    Nome:

    mais não da certo. será que alguém pode me ajudar??

  30. Olá! Parabéns pelo Post!
    Mas estava testando os pattern e o único que está funcionando e o de data, os outros não. Testei no Chrome e no IExplorer. Alguma solução para isso?

  31. Olá Bruno, existe a possibilidade de usar esse atributo pattern para validar um mesmo campo com cpf e cnpj?

  32. brother, blz?

    estou querendo usar um required para comparar dois inputs, tem como?

  33. Olá William,

    Estou tentando personalizar a mensagem padrão do navegador colocando uma mensagem personalizada com o código a seguir:
    exemplo:

    input type=”text” name=”nome” id=”nome” placeholder=”Nome” required=”” oninvalid=”setCustomValidity(‘Por favor, digite seu nome.’)” onchange=”try{setCustomValidity(”)}catch(e){}”

    No entanto, o navegador entende que quando a informação inválida foi apagada, o campo continua inválido mesmo que eu reescreva.

    tem alguma dica para isso ?

  34. Bastante prático, é claro que deve também haver a validação do lado do servidor.

    Porém já é uma mão na roda a titulo de validação do lado cliente.

    Ótimas informações.

  35. Boa tarde! Sabes se tem alguma forma do required funcionar se a pessoa acessar pelo celular? Tentei todos os jeitos, só não funciona se eu acesso pelo cel.

  36. Jeferson Santana

    março 22, 2016 at 14:24

    Ola,tem como validar o text area? Qual desses eu uso ,Valew

  37. William, boa noite.
    Encontrei seu site com as dicas de formatação de máscaras no formulário html.
    Testei no meu código, mas não está funcionando.

    <input id="cel" name="cel" type="phone" maxlength="11" 
    value="" placeholder="(00) 00000-0000" class="form-control" />

    Mesmo quando coloco o pattern=”\([0-9]{2}\) [0-9]{4,6}-[0-9]{3,4}$” /> , não está funcionando. Você pode me dar alguma dica do porquê de não funcionar?
    Valeu.

  38. Amigo, por gentileza coloca também confirmação de campos, tipo digite seu e-mail novamente, digite sua senha novamente etc. Desde ja muito obrigado, usei a validação de e-mail com java estava difícil…

  39. Pena que no Firefox, o campo date não funciona, eu até achei jQuery pra customizar isso, mas mesmo assim o atributo min não entra em ação.

  40. Agredecer pelo post!……ajudou me muito

  41. E aí Wiliam blz?

    Seguinte, eu consigo fazer uma validação de login direto no HTML5 usando esta configuração?
    Tenho um login e senha padrão de um usuário ADM, (De inicio será somente 1 usuário ADM, futuramente irei tratar em PHP a validação de mais usuários).
    Na página que estou criando tem um botão que dará acesso as aplicações e outro que dará acesso a administração. Para este botão eu gostaria de criar uma validação de login e senha padrão, exemplo: ADM / 12345. É possível?

    Desde já, vlwww!!!

    • Só com html não, você vai precisar de javascript ou php para fazer a comparação de valores.
      Daria até pra tentar uma gambiarra usando o atributo pattern=””, mas vai ficar feio.. haha

  42. Ricardo Cabral

    outubro 1, 2016 at 21:56

    Parabéns pelo post e pela iniciativa de compartilhar seu conhecimento.

  43. Olá eu queria fazer um código para filtrar apenas os numero e p caractere ( ) porém está filtrando o numero mas o ()

    EX: (99) 9999-9999 colocando esse numero na caixa fica assim: 99 9999 9999,
    mas o objetivo era ficar assim: (99) 9999 9999, permanecer apenas o parenteses
    entao eu queria liberar o parenteses mas nao consigo 🙁

  44. Boa tarde,

    Sou design gráfico, e não entendo muito de programação, estou montando um site e no contato já tem o código abaixo: Precisa saber onde e como coloco o endereço do e-mail para onde as informações do formulário serão enviadas:
    Contato

    Sua mensagem foi enviada. Obrigado!

    Enviar Mensagem

    Obrigado.

  45. Bruno bom dia,

    Eu tenho dois campos number referentes aos dias de semana, gostaria de validar se o segundo campo é inferior ao primeiro, se sim exibir uma mensagem de erro.
    Tem como fazer isso direto no HTML?

  46. Cara tem algum pattern que bloqueia se a pessoa digitar somente letras ou somente números, forçando ela a digitar letras e números e ou letras, números e carácteres especiais ?

  47. William,
    Bom dia!

    gostaria de tirar algumas duvidas por exemplo, no campo de validação de telefone, gostaria que o usuario conforme digitasse ja encaixasse automaticamente em parenteses e na formatação correta do telefone
    ex1: (xx) xxxx-xxxx
    ex2: (xx) xxxx-xxxxx
    ex3: (xx)xxxx-xxxx
    ex4: (xx)xxxx-xxxxx

  48. Guilherme Arantes

    março 22, 2017 at 00:54

    Obrigado pelo post! Ajudou muito =)

    Lembrando que emails do tipo fulano@google é perfeitamente normal existirem.

    Abraços!

  49. Guilherme Arantes

    março 22, 2017 at 11:29

    Acredito que meus comentários a respeito de email no formato fulano@google, estejam errados.

    Não tenho certeza, mas acredito que no caso do exemplo que utilizei bradesco.bradesco é como se o ultimo .bradesco fosse o “.com”, “.net” ou “.org” mas chama “.bradesco”. Então o formato de validação talvez deva sempre ser como o do post:

    conta@endereco.endereco

    Mais uma vez, agradeço pelo conteúdo.

    Abraços!

Deixe uma resposta

Your email address will not be published.

*