Artigos HTML e CSS jQuery Validate: Validando formulários

No desenvolvimento de um software a validação dos dados de entrada pelo usuário é muito importante. Em aplicações web não é diferente, precisamos validar nossos inputs. Podemos fazer basicamente dois tipos de validações, server-side e cliente-side. Nesse artigo vamos abordar o tipo cliente-side que é a validação feita antes dos dados serem enviados para o servidor.

Validando formulários com jQuery Validator

Para isso usamos normalmente Javascript puro criando nossas funções de validações especificas para cada campo mesmo que as lógicas se repitam, como por exemplo campos que não podem ficar vazios, esse tipo de campo pode se repetir em inúmeras páginas de uma aplicação e sempre temos que reescrever a função que valida campos vazios.

Veja também nosso Curso de Validação de formulários com jQuery

Então imagine um sistema de médio porte que tem muitas páginas e muitas validações que se repetem de várias maneiras até que um dia um dos programadores pensa: “vou criar uma função de validação genérica que vai contemplar regras de forma que eu precise apenas dizer essas regras, então vou escrever menos e fazer mais”.

Esse programador teve realmente uma boa ideia, pois ele só teria que escrever aquelas validações mais específicas. Porém ele só não percebeu duas coisas, ele disse que iria criar, isso demandaria muito tempo talvez, muito certamente, os prazos não contemplariam esse trabalho, logo, ele teria que procurar alguma coisa na internet, por exemplo. A segunda coisa que ele não percebeu foi que ele já deu a solução quando continuou: “vou escrever menos e fazer mais”. Isso é jQuery (Write Less, Do More). Você sabe o que é jQuery?

E é exatamente jQuery que vamos usar nesse artigo, afinal para que escrever um coisa que alguém já fez para você, não seja vaidoso.

jQuery Validator

Para ser mais específico não vamos usar apenas jQuery, usaremos junto com ela o seu plugin de validação. Então baixe a versão 1.10.0 do plugin na opção "fontes", no topo do artigo e, dentro da pasta compactada terá tudo que precisaremos para realizar o exemplo a seguir do artigo. Ao descompactar, procure nas patas lib e dist pelos arquivos jquery-1.7.2.js, jquery.validate.js e additional-methods.js e extraia-os.

Agora vamos criar nosso esquema para desenvolver os exemplos. Como não vamos usar nenhuma linguagem server-side então podemos criar nossas pastas dentro de qualquer outra, como em c:\validacao e dento desta uma outra chamada js onde devemos colocar os arquivo que extraímos anteriormente e outra chamada css para alguns estilos que usaremos também.

Pronto, estamos prontos para criar nosso formulários. Num primeiro exemplo criaremos um formulário com 3 campos: um numérico que terá um tamanho máximo de 15 caracteres, um do tipo password e outro que deve ter um valor predefinido, e por fim o botão para submeter o formulário. Vejamos a Listagem 1 com o código HTML do formulário.

Listagem 1: Formulário para exemplo de validação(form.html)


<html>
<head>
  <script src="js/jquery-1.7.2.js" type="text/javascript"></script>
  <script src="js/jquery.validate.js"type="text/javascript"></script>
  <script src="js/validacao.js"type="text/javascript"></script>
  <link href="css/css.css" rel="stylesheet" type="text/css"/> 
</head>
<body>
<h2>Exemplo de Validação</h2>
<div id="conteudo"> 
  <form id="form">
    <table>
    <tr>
      <td><label for="numero" >Número</label></td>
      <td><input type="text" id="numero" name="numero"/></td>
      <td></td>
    </tr>
    <tr>
      <td><label for="pass" ></label>Senha</td>
      <td><input type="password" id="pass" name="pass"/></td>
      <td></td>
    </tr>
    <tr>
      <td><label for="validado" ></label>Digite "Validado"</td>
      <td><input type="text" id="validado" name="validado"/></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td><button type="submit">enviar</button></td>      
    </tr>
  </form>
</div>
<span id="msg"></span>

</body>

</html>
Formulário do exemplo

Figura 1: Formulário do exemplo

Antes de ver o Javascript vamos escrever um arquivo chamado css.css para definirmos para quando o campo estiver válido ou não. É simples, vejamos a Listagem 2.

Listagem 2: Código CSS do exemplo css/css.css


#conteudo {
  background-color: #ccc;
  width: 50%;
}

#msg {
  color:red;
}

el.error{
  background-color: red;
}

el.ok {
  color: green;
}

Agora sim ao Javascript, observemos o código da Listagem 3 que contem as regras das nossas validações, logo veremos o que foi feito.

Listagem 3: Código javascript com as validações js/validacao.js


$.validator.addMethod("password",function(value){
  return value == "devmedia";
});

$.validator.addMethod("equal",function(value,element,param){
  return value == param;
});

$().ready(function(){
  var validator = $("#form").bind("invalid-form.validate",function(){
    $("#msg").html("Este formulari tem "+ validator.numberOfInvalids()+" erro(s)");
  
  }).validate(
    {
      errorElement:"el",  
      errorPlacement: function(error,element){
        element.parent("td").next("td").html(error);
      },
      success: function (label){
        
        label.text("Ok!").removeClass("error").addClass("ok");
      },
      submitHandler: function(form){
        form.submit();
      },
      rules:{
        numero:{
          required:true,
          number: true,
          maxlength:15          
        },
        pass:{
          required:true,
          password:true       
        },
        validado:{
          required:true,
          equal: "Validado"
        }
        
      },
      messages:{
        numero:{
          required:"Esse campo não pode ser vazio",
          number:"Este campo é numerico",
          maxlength:"apenas 15 caracteres"
        },
        pass:{
          required:"Esse campo não pode ser vazio",
          password: "digite devmedia"
        },
        validado:{
          required:"Esse campo não pode ser vazio",
          equal: "digite Validado"
        }
          
      }
        
    
    }
  
  )

});
Formulário com todos os campos válidos

Figura 2: Formulário com todos os campos válidos

O que fizemos basicamente foi o seguinte: primeiro criamos uma variável “validator” que será usada para manipular as validações no formulário selecionado, adicionamos por meio do método bind uma função que será executada sempre que houverem erros no formulário exibindo no span de id msg. Daí começamos a função validate satisfazendo cada um de seus call-backs, começando com as definições de qual elemento do css deve ser usado(errorElement) e uma função que deve quer usada para manipular o erro. Depois definimos a ação para caso o campo esteja finalmente validado (success), continuando definimos uma função que será executada para submeter o formulário (submitHandler).

Então chagamos as regras (rules): para número definimos 3 regras, não nulo (required), números(number) e que deve ter um tamanho máximo de 15 caracteres(maxlength), todas essas regras já veem definidas por padrão no plugin. Você deve ter notado que no começo do arquivo validacao.js (Listagem 3) fizemos uma chamada a addMethod(), o que fizemos foi adicionar mais uma regra de validação chamada password que retorna o resultado da comparação entre o valor digitado e a string “devmedia”. Para validado fizemos a mesma coisa, só que dessa fez nós passamos um valor para ser comparado dentro da função com o valor do campo.

Por fim setamos as mensagens, elas devem ser configuradas para cada elemento e para cada validação da mesma forma que fizemos nas regras.

Formulário com campos inválidos

Figura 3: Formulário com campos inválidos

Então é isso, espero que o artigo tenha despertado a curiosidade de ver mais sobre o plugin, pois ele pode oferecer ainda muito mais. Curtam, compartilhem, comentem e até a próxima.