sábado, 11 de dezembro de 2010

Como validar formulários com JavaScript

Tag <script>

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 < 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;
   }
   /* 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"):

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

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):

Postagens relacionadas

0 comentários:

Postar um comentário