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) && 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.
