Dez
08

Linked List Validation

Autor // Alexandre Santos

Um dos grandes problemas quando se cria uma aplicação web é validar formulários HTML, na maioria dos casos podemos notar que os programadores opitam por usar Javascript para agilizar a validação, validando primeiro no client para depois validar no server.

Neste artigo vamos entender como funciona a validação de lista ligada (Linked List Validation) ou validação de corrente, que é um metodo que valida o formulario como um todo, para utilizarmos este tipo de validação criaremos uma lista ligada, onde cada Nó da lista é um objeto e representa um campo do formulario, que possui um metodo de validação, este metodo de validação testa o valor inserido no campo e caso o valor seja válido, retorna o resultado do teste do proximo campo, até que se acabe a lista. Caso algum campo não seja válido, este campo "quebrará a corrente" retornando false como resultado da validação.

Para que a verificação se torne ativa, adicionamos no metodo onsubmit() do formulario, a validação do primeiro campo, o que gera uma reação em cadeia validando os campos subseguentes. Caso o valor retornado seja true todos os campos são válidos, caso seja false, algum campo não é válido segundo sua própria Regra.
Vamos ver como isto fica em código:

// Função que retorna um Elemento do HTML pelo id
function id(idName)
{
 return ( document.getElementById(idName) );
}
// Função que copia os metodos e os atributos de um objeto para outro
function copiaObjeto()
{
 var objOrigem = arguments[0], objDestino = arguments[1];
 for (var propriedade in objOrigem)
 {
 objDestino[propriedade] = objOrigem[propriedade];
 }
 if ( arguments[2] != undefined )
 {
 copiaObjeto(arguments[2], objDestino, null);
 }
 return ( objDestino );
 }
 
// Objeto que representará um "Nó"
var llvNo = {
 Regra: null,
 Valida: function()
 {
 if ( this.Regra == null )
 {
 return ( false );
 }
 else 
 {
 if(this.Regra()==true)
 {
 return ( (this.Proximo==null)?true:this.Proximo.Valida() );
 }
 else
 {
 return ( false );
 }
 }
},
 Proximo: null
};
 
// Objeto que representa o formulário
var llvForm = {
 PrimeiroCampo: null,
 Validar: function(formularioDestino, pCampo)
 {
 this.PrimeiroCampo = pCampo;
 copiaObjeto(this, formularioDestino);
 },
 onsubmit: function()
 {
 return ( this.PrimeiroCampo.Valida() );
 }
};

Explicando o script acima:

function id(idName);
function copiaObjeto(objOrigem, objDestino, metodosExtras);

Estas duas funções foram criadas para facilitar algumas tarefas, a função id(idName) apenas substitui o document.getElementById(idName), e a função copiaObjeto(objOrigem, objDestino, metodosExtras) copia todos os metodos e atributos do objOrigem para o objDestino, além de possibilitar a inclusão de novos metodos ou atributos através do objeto metodosExtras.

O objeto llvNo é o objeto que representará um campo do formulario, este objeto possui uma Regra que deverá ser um metodo especificado pelo programador (veremos adiante), um metodo Valida que executará a Regra e um atributo Proximo, que deverá ser o proximo campo do formulário.

O objeto llvForm é o objeto que representará o formulário, possui um metodo Valida que ativa a validação em um formulario parametrizando qual será o primeiro campo, um parametro PrimeiroCampo que será o primeiro campo, e um metodo onsubmit que não permitirá que o formulário seja enviado caso algum campo não seja válido.

Bom a estrutura básica é esta, vamos ver agora como configurar um formulário para ser validado, partindo do principio que o script acima se encontra em um arquivo chamado "llv_javascript.js" temos o html abaixo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
 
<head>
 <title>
 Linked List Validation - Javascript - by.: Alexandre Aparecido dos Santos
 </title>
 
 <script type="text/javascript" src="llv_javascript.js"></script>
 <script type="text/javascript" src="simples_setup.js"></script>
</head>
<body onload="start_app()">
 <h3>Linked List Validation - by.: Alexandre Aparecido dos Santos</h3>
 <form id="Form1" method="post" action="#">
 <span id="lblCpf" style="display:inline-block;width:50px;">CPF:</span>
 <input type="text" name="cpf" value="" id="cpf" /><br />
 <span id="lblEmail" style="display:inline-block;width:50px;">Email:</span>
 <input type="text" name="email" value="" id="email" /><br />
 <input type="submit" value="TESTAR" style="margin-left: 50px;" />
 </form>
</body>
</html>

Este HTML gera o formulário a seguir. Para configurar a validação para este formulario usaremos o script a seguir (que eu salvei no arquivo "simples_setup.js")

// Função executada ao carregar a pagina
function start_app()
{
 var campo1 = id('cpf');
 copiaObjeto(llvNo, campo1,{
 Regra: function() // <- Regra de validação do campo CPF
 {
 // Verifica se o cpf possui 11 digitos
 if(this.value.length!=11)
 {
 alert('CPF Inválido!');
 this.focus();
 return ( false );
 }
 else
 {
 // Armazena os digitos do CPF
 var digitos = [];
 var digitoVerificador = this.value.substr(9,2);
 for(var i=0; i<9; i++)
 {
 digitos[i] = this.value.substr(i, 1);
 }
 // Calcula o 10º digito
 var soma = 0, posicao= 10;
 for(i=0; i<9; i++)
 {
 soma += digitos[i] * posicao--;
 }
 soma = soma % 11;
 digitos[9] = (soma<2)? 0 : 11-soma;
 
 // Calcula o 11º digito
 posicao = 11;
 soma = 0;
 for(i=0; i<10; i++)
 {
 soma += digitos[i] * posicao--;
 }
 soma = soma % 11;
 digitos[10] = (soma<2)? 0 : 11-soma;
 
 // Verifica se o Digito verificador é valido
 var dv=digitos[9] * 10 + digitos[10];
 if(dv==digitoVerificador)
 {
 return (true);
 }
 else
 {
 alert('CPF Inválido');
 return (false);
 }
 }
 },
 onkeypress: function(e)
 {
 var chKey = (window.event)? window.event.keyCode : e.charCode;
 if((chKey<48 || chKey>57) &amp;&amp; chKey!=0)
 {
 alert('Este campo só aceita numeros');
 return (false);
 }
 else 
 return (true);
 }
 }
 );
 
 var campo2 = id('email');
 copiaObjeto(llvNo, campo2, {
 Regra: function()
 {
 var r = /^.+@.+\..+$/;
 if(r.exec(this.value))
 {
 return (true);
 }
 else
 {
 alert('E-mail inválido!');
 return (false);
 }
 }
 });
 campo1.Proximo = campo2;
 llvForm.Validar(id('Form1'), campo1);
}

ou seja, para utilizar o script de validação, o modelo a ser seguido é:

llvForm.Validar(
 id('Id do formulario'),
 copiaObjeto(llvNo, id('campo 1'),{
 Regra: function(){
 // codigo para a validar o campo 1, 
 // lembrando que quando desejar 
 // se referir ao campo use this
 },
 Proximo: copiaObjeto(llvNo, id('campo 2'), {
 Regra: function(){
 // Codigo para validar o campo 2
 },
 Proximo: copiaObjeto(llvNo, id('campo n...'), {
 Regra: function(){
 // Codigo para validar o campo n...
 },
 Proximo: null
 })
 })
 }
);

Bom a respeito deste metodo, é isso, espero que possa ser util, lembrando que o metodo ainda esta em desenvolvimento.

Até a proxima.
blog comments powered by Disqus
back to top