![\"HTML5\"](\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2012\/01\/logo-html5-kadunew.png\" "\\"HTML5\\""){kind=logo}
<\/p>\n<\/p>\n
HTML5<\/a> evoluiu bastante e tem uma s\u00e9rie de novidades entre elementos e atributos para formul\u00e1rios<\/strong>. Nesse artigo mostro um pouco sobre valida\u00e7\u00e3o dos campos de um formul\u00e1rio. Acredito que em um futuro pr\u00f3ximo os desenvolvedores n\u00e3o precisaram escrever o c\u00f3digo de valida\u00e7\u00e3o de formul\u00e1rio em JavaScript, por exemplo, j\u00e1 que os navegadores ser\u00e3o capazes de fazer tudo isso para n\u00f3s. Usabilidade em formul\u00e1rios mobile<\/a><\/strong><\/p>\n Utilizamos esse atributo para informar ao navegador que um elemento do formul\u00e1rio \u00e9 de preenchimento obrigat\u00f3rio, ou seja, o usu\u00e1rio n\u00e3o consegue enviar o formul\u00e1rio se n\u00e3o preencher o campo com o atributo required<\/strong>. Seu uso \u00e9 exclusivo com os elementos Uma mensagem \u00e9 informada ao usu\u00e1rio em uma tentativa de envio de formul\u00e1rio sem o preenchimento de um campo<\/strong> com Abaixo mostro as mensagens de alerta nos seguintes navegadores: Google Chrome, Firefox e Opera. Perceba que cada fabricante estiliza a mensagem de forma diferente<\/strong>.<\/p>\n Atributo Alerta para o usu\u00e1rio caso n\u00e3o seja digitado nada no campo input.<\/p>\n Alerta para o usu\u00e1rio caso n\u00e3o seja digitado um formato de e-mail no campo Um recurso CSS3 pode ser usando para identificar se o elemento do formul\u00e1rio recebeu ou n\u00e3o um dado v\u00e1lido. Esse recurso \u00e9 o pseudoclasse Assim que o usu\u00e1rio digitar um dado v\u00e1lido, o navegador altera o pseudoclasse de Veja o CSS:<\/p>\n Um campo Mensagem de alerta do navegador Chrome ao digitarmos uma url em um formato inv\u00e1lido.<\/p>\n Com uso do atributo Explicarei o atribudo criando uma express\u00e3o para entrada de um n\u00famero de telefone. O valor inserido no campo de Abaixo o c\u00f3digo para criar a condi\u00e7\u00e3o descrita acima.<\/p>\n \\([0-9]{2}\\)<\/strong> usu\u00e1rio deve digitar dois n\u00fameros de 0 at\u00e9 9 entre par\u00eanteses.<\/p>\n [\\s][0-9]{4}-[0-9]{4}<\/strong> um espa\u00e7o e duas sequ\u00eancia de n\u00fameros divididas por um tra\u00e7o.<\/p>\n Em HTML5<\/a> h\u00e1 um valor para o atributo Abaixo outro exemplo utilizando o atributo Quando presente dentro do elemento No exemplo acima mesmo que o usu\u00e1rio clique no bot\u00e3o enviar sem preencher os campos com Pelos testes que fiz a valida\u00e7\u00e3o funcionou perfeitamente nos navegadores<\/a> Chrome<\/a>, Opera<\/a> e Firefox<\/a> em suas \u00faltimas vers\u00f5es. Navegadores como Safari<\/a> e Internet Explorer n\u00e3o foram capazes de reconhecer tais elementos da HTML5.<\/p>\n Curta a p\u00e1gina do blog kadunew<\/a> no Facebook. Siga-me no Twitter: @kadunew<\/a> ou assine nosso Feed<\/a> e fique por dentro de todas atualiza\u00e7\u00f5es aqui do blog.<\/p>\n","protected":false},"excerpt":{"rendered":" HTML5 evoluiu bastante e tem uma s\u00e9rie de novidades entre elementos e atributos para formul\u00e1rios. Nesse artigo mostro um pouco sobre valida\u00e7\u00e3o dos campos de um formul\u00e1rio. Acredito que em um futuro pr\u00f3ximo os desenvolvedores n\u00e3o precisaram escrever o c\u00f3digo de valida\u00e7\u00e3o de formul\u00e1rio em JavaScript, por exemplo, j\u00e1 que os navegadores ser\u00e3o capazes de […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[59],"tags":[34,55],"class_list":["post-2200","post","type-post","status-publish","format-standard","hentry","category-html","tag-html","tag-web-design"],"yoast_head":"\n
\n<\/p>\nAtributo required<\/h2>\n
input<\/code>, select<\/code> e textarea<\/code>.<\/p>\nrequired<\/code>. Esse atributo apenas verifica se o campo foi preenchido ou n\u00e3o. Quero dizer que, qualquer caractere ser\u00e1 aceito.<\/p>\n\r\n <form method="post" action="">\r\n <label for="nome">Nome: <\/label><input id="nome" type=text required name=nome>\r\n <input type=submit value="OK">\r\n <\/form>\r\n<\/pre>\n
![\"mensagem](\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2012\/01\/exemplo-validacao-html5-required.png\" "\\"mensagem")
<\/p>\ntype=”email”<\/h2>\n
type<\/code> de um input<\/code> com a op\u00e7\u00e3o igual a email<\/code> significa definir o campo para receber um endere\u00e7o de e-mail v\u00e1lido<\/strong>. A forma de valida\u00e7\u00e3o n\u00e3o verifica se o e-mail digitado realmente existe, mas sim se o formato est\u00e1 correto. Exemplo de um formato de email aceito: teste@teste.com.<\/p>\n\r\n<form method="post" action="">\r\n <label for="email">E-mail: <\/label><input id="email" type=email required name=email>\r\n <input type=submit value="OK">\r\n <\/form>\r\n<\/pre>\n
\nAtente para o seguinte: al\u00e9m de ser um campo onde o usu\u00e1rio deve digitar um endere\u00e7o de e-mail v\u00e1lido o campo \u00e9 de preenchimento obrigat\u00f3rio.\n<\/div>\n![\"Valida\u00e7\u00e3o](\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2012\/01\/validacao-type-email-required.png\" "\\"Valida\u00e7\u00e3o")
<\/p>\ninput<\/code>.<\/p>\n![\"Valida\u00e7ao](\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2012\/01\/validacao-email.png\" "\\"Valida\u00e7ao")
<\/p>\n:valid e :invalid<\/code><\/p>\n:invalid<\/code> para :valid<\/code>. No exemplo abaixo o campo inicia com uma cor de fundo avermelhada, assim que o usu\u00e1rio digitar um formato de e-mail o campo \u00e9 alterado para verde.<\/p>\n\r\n #email:valid {background:#006600;color:#fff }\r\n #email:invalid {background:#990000; color:#fff}\r\n<\/pre>\ntype=”url”<\/h2>\n
input <\/code>com type <\/code>igual a url <\/code>recebe apenas url\u2019s no seu formato correto, ou seja, http:\/\/www.site.com, http:\/\/www.site.com.br etc.<\/p>\n\r\n <form method="post" action="">\r\n <label for="site">Site: <\/label><input id="email" type=url required name=site>\r\n <input type=submit value="OK">\r\n <\/form>\r\n<\/pre>\n
![\"Exemplo](\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2012\/01\/validacao-url.png\" "\\"Exemplo")
<\/p>\npattern = \u201cExpress\u00e3o\u201d<\/h2>\n
pattern<\/code> voc\u00ea pode exigir que o usu\u00e1rio digite valores em um padr\u00e3o feito com express\u00e3o regular<\/a>, ou seja, o que for digitado no compo input<\/code> dever\u00e1 satisfazer a express\u00e3o regular criada pelo desenvolvedor.<\/p>\ninput<\/code> dever\u00e1 iniciar com (xx)<\/em> logo ter\u00e1 um espa\u00e7o em branco com uma sequ\u00eancia de quatro d\u00edgitos, um tra\u00e7o, e para terminar mais uma sequ\u00eancia de quatro d\u00edgitos, ficando assim: (xx) xxxx-xxxx<\/em>.<\/p>\n\r\n<form>\r\n <label>Telefone: <input required name="tel" pattern="\\([0-9]{2}\\)[\\s][0-9]{4}-[0-9]{4}"><\/label> (xx) xxxx-xxxx\r\n <input type=submit value=Enviar>\r\n <\/form>\r\n<\/pre>\ntype <\/code>que \u00e9 o tel<\/code>. Ao utilizar esse valor n\u00e3o h\u00e1 m\u00e1scara de formata\u00e7\u00e3o ou valida\u00e7\u00e3o, j\u00e1 que n\u00e3o h\u00e1 um padr\u00e3o para n\u00fameros de telefones. Ele serve apenas para informar que o valor do campo \u00e9 um n\u00famero de telefone.<\/p>\npattern<\/code>, agora validando CEP<\/p>\n\r\n<form>\r\n <label>CEP: <input required name="cep" pattern="[0-9]{5}-[0-9]{3}"><\/label> (xx) xxxx-xxxx\r\n <input type=submit value=Enviar>\r\n<\/form>\r\n<\/pre>\nnovalidate=”novalidate”<\/h2>\n
form<\/code>, especifica que os elementos do formul\u00e1rio n\u00e3o devem ser validados quando submetidos mesmo que tenham em seu type<\/code> atributos iguais a email<\/code>, url<\/code>, etc.<\/p>\n\r\n<form action=" " novalidate="novalidate">\r\n <label>nome: <input name="nome" required><\/label>\r\n <label>email: <input name="email" type="email" required><\/label>\r\n <input type="submit" name="action" value="Enviar">\r\n<\/form>\r\n<\/pre>\n
required <\/code>o formul\u00e1rio ser\u00e1 submetido. Isso porque passamos o valor novalidate=\"novalidate\"<\/code>.<\/p>\n\nVeja todos os exemplos de valida\u00e7\u00e3o em HTML5<\/a> que usei aqui no artigo.\n<\/div>\nCompatibilidade entre navegadores<\/h2>\n