{"id":318,"date":"2012-01-29T09:17:19","date_gmt":"2012-01-29T11:17:19","guid":{"rendered":"http:\/\/www.agenciadewebsites.com.br\/?p=318"},"modified":"2012-01-29T09:23:12","modified_gmt":"2012-01-29T11:23:12","slug":"validador-de-campo-obrigatorio","status":"publish","type":"post","link":"http:\/\/www.agenciadewebsites.com.br\/?p=318","title":{"rendered":"Validador de campo obrigat\u00f3rio"},"content":{"rendered":"<div id=\"fb_share_1\" style=\"float: right; margin-left: 10px;\"><a name=\"fb_share\" type=\"box_count\" share_url=\"http:\/\/www.agenciadewebsites.com.br\/?p=318\" href=\"http:\/\/www.facebook.com\/sharer.php\">Share<\/a><\/div>\n<div><script src=\"http:\/\/static.ak.fbcdn.net\/connect.php\/js\/FB.Share\" type=\"text\/javascript\"><\/script><\/div>\n<table>\n<tbody>\n<tr>\n<td colspan=\"2\" align=\"left\" valign=\"top\" width=\"70%\">Escrito por Sandro Silva em 19-Fev-2008.<\/td>\n<\/tr>\n<tr>\n<td colspan=\"2\" valign=\"top\">Neste pequeno tutorial, ser\u00e1 demonstrado o uso do JavaScript para validar campos de preenchimento obrigat\u00f3rio em um formul\u00e1rio, destacando os campos obrigat\u00f3rio em vermelho.<strong>O c\u00f3digo JavaScript<\/strong><\/p>\n<p>Basicamente, o c\u00f3digo JavaScript l\u00ea todos os campos do formul\u00e1rio, identifica quais campos s\u00e3o obrigat\u00f3rios, verifica se est\u00e3o em branco e caso positivo coloca em vermelho a legenda e o fundo do campo.<\/p>\n<p>O c\u00f3digo \u00e9 o seguinte:<\/p>\n<p>&lt;script language=&#8221;JavaScript&#8221;&gt;<br \/>\nfunction validaCampoObrigatorio(form){<br \/>\nvar erro=0;<br \/>\nvar legenda;<br \/>\nvar obrigatorio;<br \/>\nfor (i=0;i&lt;form.length;i++){<br \/>\nobrigatorio = form[i].lang;<br \/>\nif (obrigatorio==1){<br \/>\nif (form[i].value == &#8220;&#8221;){<br \/>\nvar nome = form[i].name;<br \/>\nmudarCorCampo(form[i], &#8216;red&#8217;);<br \/>\nlegenda=document.getElementById(nome);<br \/>\nlegenda.style.color=&#8221;red&#8221;;<br \/>\nerro++;<br \/>\n}<br \/>\n}<br \/>\n}<br \/>\nif(erro&gt;=1){<br \/>\nalert(&#8220;Existe(m) &#8221; + erro + &#8221; campo(s) obrigat\u00f3rio(s) vazio(s)! &#8220;)<br \/>\nreturn false;<br \/>\n} else<br \/>\nreturn true;<br \/>\n}<\/p>\n<p>function mudarCorCampo(elemento, cor){<br \/>\nelemento.style.backgroundColor=cor;<br \/>\n}<br \/>\n&lt;\/script&gt;<\/p>\n<p>A fun\u00e7\u00e3o validaCampoObrigatorio(form), pega o formul\u00e1rio que ser\u00e1 validado, l\u00ea todos os campos do formul\u00e1rio (for (i=0;i&lt;form.length;i++)), se for obrigat\u00f3rio (if (obrigatorio==1)) verifica se esta em branco (if (form[i].value == &#8220;&#8221;)), caso positivo troca a cor do campo para vermelho (mudarCorCampo(form[i], &#8216;red&#8217;)).<\/p>\n<p>A fun\u00e7\u00e3o mudarCorCampo(elemento, cor) \u00e9 utilizada para mudar a cor do campo para vermelho e tamb\u00e9m para branco, quando o usu\u00e1rio estiver corrigindo o campo.<\/p>\n<p><strong>O Formul\u00e1rio<\/strong><\/p>\n<p>Para que o JavaScript funcione o formul\u00e1rio tem seguir o modelo abaixo:<\/p>\n<p>&lt;form method=&#8221;post&#8221; action=&#8221;&#8221; onSubmit=&#8221;return validaCampoObrigatorio(this)&#8221;&gt;<br \/>\n&lt;samp id=&#8221;Dia&#8221;&gt;*Dia: &lt;\/samp&gt;<br \/>\n&lt;input type=&#8221;text&#8221; lang=&#8221;1&#8243; name=&#8221;Dia&#8221; onFocus=&#8221;mudarCorCampo(this,&#8217;white&#8217;)&#8221;&gt;<br \/>\n&lt;br&gt;<br \/>\n&lt;samp id=&#8221;Local&#8221;&gt;*Local: &lt;\/samp&gt;<br \/>\n&lt;input type=&#8221;text&#8221; lang=&#8221;1&#8243; name=&#8221;Local&#8221; onFocus=&#8221;mudarCorCampo(this,&#8217;white&#8217;)&#8221;&gt;<br \/>\n&lt;br&gt;<br \/>\n&lt;samp id=&#8221;Hora&#8221;&gt;Hora: &lt;\/samp&gt;<br \/>\n&lt;input type=&#8221;text&#8221; lang=&#8221;0&#8243; name=&#8221;Hora&#8221; onFocus=&#8221;mudarCorCampo(this,&#8217;white&#8217;)&#8221;&gt;<br \/>\n&lt;input type=&#8221;submit&#8221; name=&#8221;button&#8221; id=&#8221;button&#8221; value=&#8221;OK&#8221; \/&gt;&lt;br&gt;<br \/>\n*campos obrigatotios<br \/>\n&lt;\/form&gt;<\/p>\n<p>A fun\u00e7\u00e3o principal do JavaScript fica em onSubmit, na tag form. Ela diz para o sistema que antes de enviar o formul\u00e1rio os campos devem ser validados.<\/p>\n<p>Para que as legendas mudem de cor \u00e9 necess\u00e1rio usar a tag samp com id igual ao name do input. Ex: &lt;samp id=\u201dHora\u201d&gt;&#8230;&lt;input name=\u201dHora\u201d &#8230;&gt;. O comando que determina que um campo \u00e9 obrigat\u00f3rio ou n\u00e3o \u00e9 o lang, quando ele esta com 1 \u00e9 obrigat\u00f3rio, quando \u00e9 0 n\u00e3o \u00e9. Al\u00e9m do lang \u00e9 necess\u00e1rio o comando onFocus que faz os campos em vermelho mudarem para branco quando o usu\u00e1rio esta corrigindo os dados.<\/p>\n<p>Fonte: http:\/\/www.fabsoft.cesupa.br\/site\/index.php?option=com_content&amp;task=view&amp;id=39&amp;Itemid=34<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"<p>Share Escrito por Sandro Silva em 19-Fev-2008. Neste pequeno tutorial, ser\u00e1 demonstrado o uso do JavaScript para validar campos de preenchimento obrigat\u00f3rio em um formul\u00e1rio, destacando os campos obrigat\u00f3rio em vermelho.O c\u00f3digo JavaScript Basicamente, o c\u00f3digo JavaScript l\u00ea todos os campos do formul\u00e1rio, identifica quais campos s\u00e3o obrigat\u00f3rios, verifica se est\u00e3o em branco e caso [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[23,21,22],"_links":{"self":[{"href":"http:\/\/www.agenciadewebsites.com.br\/index.php?rest_route=\/wp\/v2\/posts\/318"}],"collection":[{"href":"http:\/\/www.agenciadewebsites.com.br\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.agenciadewebsites.com.br\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.agenciadewebsites.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.agenciadewebsites.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=318"}],"version-history":[{"count":4,"href":"http:\/\/www.agenciadewebsites.com.br\/index.php?rest_route=\/wp\/v2\/posts\/318\/revisions"}],"predecessor-version":[{"id":321,"href":"http:\/\/www.agenciadewebsites.com.br\/index.php?rest_route=\/wp\/v2\/posts\/318\/revisions\/321"}],"wp:attachment":[{"href":"http:\/\/www.agenciadewebsites.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=318"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.agenciadewebsites.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=318"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.agenciadewebsites.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=318"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}