Como validar formulários com JavaScript
Autor: Ricardo Veloso | Publicado: 2010-12-11T18:39:00-02:00



Neste tutorial, estarei explicando como realizar validações de formulários, antes de enviá-los, usando JavaScript.



A validação de formulários via JavaScript é mais fácil do que muitos imaginam, e tem a vantagem de não sobrecarregar o servidor que receberá o formulário. Na verdade, tudo que tem de ser feito é a inclusão do atributo onsubmit, contendo o texto "return ", seguido do nome da função que realizará a validação. Na função, são capturados os elementos selecionados, através de suas ids ou classes e os mesmos são encaminhados a uma validação, que se resume a comparação de caracteres. No caso de um elemento não passar no teste, é retornado false, o que cancela o envio do formulário, e opcionalmente, realça os elementos que não passaram no teste. Apenas quando todos os elementos passarem no teste, a função irá retornar true e, consequentemente, enviar o formulário.

Veja o exemplo abaixo, onde os elementos escolhidos por id (através de um array de strings passado como parâmetro) passam pelo teste de "formato de data" e são realçados com a cor vermelha, caso não passem no teste:

function validarData(ids)
{
   var ok = true;

   for (i = 0; i &lt; ids.length; i++)
   {
      var element = document.getElementById(ids[i]);

      with (element) // a estrutura with serve como atalho
      {
         if (value.length === 10) // element.value.length === 10
         {
            element.style.color = 'black';
            if (
                value[0] &lt; '0' || value[0] &gt; '3' ||
                (value[0] === '3' &amp;&amp; (value[1] &lt; '0' || value[1] &gt; '1')) ||

                value[3] &lt; '0' || value[3] &gt; '1' ||
                (value[3] === '1' &amp;&amp; (value[4] &lt; '0' || value[4] &gt; '2')) ||

                value[6] &lt; '0' || value[6] &gt; '9' ||
                value[7] &lt; '0' || value[7] &gt; '9' ||
                value[8] &lt; '0' || value[8] &gt; '9' ||
                value[9] &lt; '0' || value[9] &gt; '9' ||

                value[2] !== '/' || value[5] !== '/'
               )
            {
               element.style.color = 'red';
               element.style.borderColor = 'red';
               ok = false;
            }
            else
            {
               element.style.color = 'black';
               element.style.borderColor = 'green';
            }
         }
         else
         {
            element.style.color = 'red';
            element.style.borderColor = 'red';
            ok = false;
         }
      }
   }
   return ok;
}

function validar()
{
   var ok = true;
   if (validarData(['nasci', 'morte']) === false)
   {
      ok = false;
   }
   /* Mais funções podem ser adicionadas como parte do teste */
   return ok;
}


Abaixo está o código HTML com o formulário e a chamada da função (em arquivo externo, chamado "validar.js"):

&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;script src="validar.js"&gt;&lt;/script&gt;
    &lt;title&gt;Validação de formulários&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;form action="form.php" onsubmit="return validar();" method="post"&gt;
      &lt;input type="text" id="nasci" name="nasci" placeholder="dd/mm/aaaa" /&gt;
      &lt;input type="text" id="morte" name="morte" placeholder="dd/mm/aaaa" /&gt;
      &lt;input type="submit" /&gt;
    &lt;/form&gt;
  &lt;/body&gt;
&lt;/html&gt;


Código PHP que receberá o formulário:

$nasci = $_POST["nasci"];
$morte = $_POST["morte"];

/* ... */


Veja o resultado abaixo (preencha o segundo campo de texto, usando o mesmo formato de data que o primeiro campo):



// <[CDATA[
function validarData(ids)
{
   var ok = true;

   for (i = 0; i < ids.length; i++)
   {
      var element = document.getElementById(ids[i]);

      with (element) // a estrutura with serve como atalho
      {
         if (value.length === 10) // element.value.length === 10
         {
            element.style.color = 'black';
            if (
                value[0] < '0' || value[0] > '3' ||
                (value[0] === '3' && (value[1] < '0' || value[1] > '1')) ||

                value[3] < '0' || value[3] > '1' ||
                (value[3] === '1' && (value[4] < '0' || value[4] > '2')) ||

                value[6] < '0' || value[6] > '9' ||
                value[7] < '0' || value[7] > '9' ||
                value[8] < '0' || value[8] > '9' ||
                value[9] < '0' || value[9] > '9' ||

                value[2] !== '/' || value[5] !== '/'
               )
            {
               element.style.color = 'red';
               element.style.borderColor = 'red';
               ok = false;
            }
            else
            {
               element.style.color = 'black';
               element.style.borderColor = 'green';
            }
         }
         else
         {
            element.style.color = 'red';
            element.style.borderColor = 'red';
            ok = false;
         }
      }
   }
   return ok;
}

function validar()
{
   var ok = true;
   if (validarData(['nasci', 'morte']) === false)
   {
      ok = false;
   }

   if (ok === true)
   {
      alert('Formulário enviado (simulação)');
   }
   return false;
}
// ]]>









Postagens relacionadas


Como usar event listeners com Javascript
Como criar o efeito de marca d’água numa caixa de texto
Como chamar um script em uma página
Como modificar uma página, com JavaScript
Como usar funções em JavaScript