{"id":283,"date":"2019-11-04T18:07:44","date_gmt":"2019-11-04T20:07:44","guid":{"rendered":"http:\/\/xaxowareti.com.br\/?p=283"},"modified":"2019-11-04T18:09:27","modified_gmt":"2019-11-04T20:09:27","slug":"validando-formularios-apenas-com-html5","status":"publish","type":"post","link":"https:\/\/xaxowareti.com.br\/?p=283","title":{"rendered":"Validando formul\u00e1rios apenas com html5"},"content":{"rendered":"\n
\"html5\"<\/figure><\/div>\n\n\n\n

Validar formul\u00e1rios \u00e9 chato, tedioso e trabalhoso. Felizmente algu\u00e9m olhou isso e resolveu incluir dentro da especifica\u00e7\u00e3o do html, alguns atributos e valores novos muito interessantes.<\/p>\n\n\n\n

Se usarmos corretamente, e estudarmos Express\u00f5es Regulares, \u00e9 poss\u00edvel fazer uma valida\u00e7\u00e3o 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<\/a>) e um uso do atributo pattern<\/strong> para os qual eu escrevi algunms ERs.<\/p>\n\n\n\n

Apenas letras<\/strong><\/p>\n\n\n\n

<input type=\"text\" required=\"required\" name=\"text\" pattern=\"[a-z\\s]+$\" \/><\/pre>\n\n\n\n
Apenas n\u00fameros<\/strong><\/p>\n\n\n\n
<input type=\"text\" required=\"required\" name=\"numbers\" pattern=\"[0-9]+$\" \/><\/pre>\n\n\n\n
Data<\/strong><\/p>\n\n\n\n
<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\" \/><\/pre>\n\n\n\n
Hora<\/strong><\/p>\n\n\n\n
<input type=\"time\" required=\"required\" maxlength=\"8\" name=\"hour\" pattern=\"[0-9]{2}:[0-9]{2} [0-9]{2}$\" \/><\/pre>\n\n\n\n
Campos gen\u00e9ricos de texto<\/strong><\/p>\n\n\n\n
<input type=\"text\" required=\"required\" name=\"name\" \/><\/pre>\n\n\n\n
Telefone<\/strong><\/p>\n\n\n\n
<input type=\"tel\" required=\"required\" maxlength=\"15\" name=\"phone\" pattern=\"\\([0-9]{2}\\) [0-9]{4,6}-[0-9]{3,4}$\" \/><\/pre>\n\n\n\n
Email<\/strong><\/p>\n\n\n\n
<input type=\"email\" required=\"required\" class=\"input-text\" name=\"email\" pattern=\"[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$\" \/><\/pre>\n\n\n\n
Moeda<\/strong><\/p>\n\n\n\n
<input type=\"tel\" required=\"required\" maxlength=\"15\" name=\"valor\" pattern=\"([0-9]{1,3}\\.)?[0-9]{1,3},[0-9]{2}$\" \/>\n<\/pre>\n\n\n\n
Utilizei o type=\u201dtel\u201d, pq em celulares renderiza melhor o teclado.<\/p>\n\n\n\n
Input file<\/strong><\/p>\n\n\n\n
<input type=\"file\" name=\"file\" accept=\"image\/*\" required=\"required\" \/><\/pre>\n\n\n\n
placeholder<\/h2>\n\n\n\n
Lembre-se de usar o placeholder nos seus campos em que voc\u00ea precise \u201cdar alguma dica\u201d<\/em> para o usu\u00e1rio de como ele deve preench\u00ea-lo<\/p>\n\n\n\n
Estilizar os inputs<\/h2>\n\n\n\n
Fa\u00e7a testes utilizando as pseudo classes<\/p>\n\n\n\n
input:required:invalid {}\ninput:required:valid {}<\/pre>\n\n\n\n
Personalizar as mensagens de erro<\/h2>\n\n\n\n
Encontrei este artigo bem completo e interessante: Validando formul\u00e1rios like a boss com HTML5<\/a>. Onde \u00e9 mostrado o atributo: required x-moz-errormessage=\u201dOps. N\u00e3o esque\u00e7a de preencher este campo.\u201d, logicamente exclusivo do Firefox.<\/p>\n\n\n\n
E para webkit, o css:<\/p>\n\n\n\n
::-webkit-validation-bubble {\/*Insira aqui seu CSS.*\/}\n::-webkit-validation-bubble-message {}\n::-webkit-validation-bubble-arrow {}\n::-webkit-validation-bubble-arrow-clipper {}<\/pre>\n\n\n\n
That\u2019s all folks!<\/h2>\n","protected":false},"excerpt":{"rendered":"
Validar formul\u00e1rios \u00e9 chato, tedioso e trabalhoso. Felizmente algu\u00e9m olhou isso e resolveu incluir dentro da especifica\u00e7\u00e3o do html, alguns atributos e valores novos muito interessantes. Se usarmos corretamente, e estudarmos Express\u00f5es Regulares, \u00e9 poss\u00edvel fazer uma valida\u00e7\u00e3o simples sem escrever nenhuma linha de javascript. Vou deixar abaixo alguns snippets da tag input, utilizando o […]<\/p>\n","protected":false},"author":1,"featured_media":277,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-283","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sem-categoria"],"_links":{"self":[{"href":"https:\/\/xaxowareti.com.br\/index.php?rest_route=\/wp\/v2\/posts\/283","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xaxowareti.com.br\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xaxowareti.com.br\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xaxowareti.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xaxowareti.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=283"}],"version-history":[{"count":1,"href":"https:\/\/xaxowareti.com.br\/index.php?rest_route=\/wp\/v2\/posts\/283\/revisions"}],"predecessor-version":[{"id":284,"href":"https:\/\/xaxowareti.com.br\/index.php?rest_route=\/wp\/v2\/posts\/283\/revisions\/284"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/xaxowareti.com.br\/index.php?rest_route=\/wp\/v2\/media\/277"}],"wp:attachment":[{"href":"https:\/\/xaxowareti.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=283"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xaxowareti.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=283"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xaxowareti.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=283"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}