Translate this page now :



»Programação
»Programação.NET
»Banco de Dados
»Webdesign
»Office
» Certificações Microsoft 4
»Treinamentos4
»Programação 4
»Webdesign«
»Office & User Tips«
»Grupos de Usuários
»Células Acadêmicas«

Palm ou pão
Você já está cadastrado e participa do grupo de usuários de sua cidade ? Se não, comente o porque.
 
 
Faça um pequeno teste com 10 questões de VB
.:.
Teste seus conhecimentos em Visual Basic, SQL Server e ASP 3.0 com nossas provas on-line
.:.
Aprimore seus conhecimentos em programação com nosso treinamento on-line de lógica de programação
.:.
Veja nosso calendário de treinamentos
Gostou da Página?
Então

para um amigo!
 







Pesquisa personalizada
Pesquisar Dicas:

 






Técnicas de validação de dados com JavaScript


É muito comum precisarmos validar dados de formulários na Web utilizando JavaScript. Apesar de inseguro, é mais bonito (e melhor para a escalabilidade) que o usuário veja os erros existentes no formulário antes de ter que enviar o formulário para o servidor.

Que é mais inseguro já é fato conhecido. Qualquer um pode salvar a página, eliminar o JavaScript e gravar os dados sem a validação. Mas para evitar isso basta que a mesma validação seja novamente feita no ASP e/ou no banco de dados. Ainda assim a validação em JavaScript é vantajosa por minimizar as comunicações com o servidor.

A simples criação de funções em JavaScript é um processo trabalhoso e repetitivo. Por exemplo, quantas vezes você teria que escrever uma função para checar a obrigatoriedade de um campo ? Para cada campo obrigatório do formulário ?

O interessante seria criar a possibilidade de usar sempre a mesma função, parametrizando as validações. Assim sendo não seria necessário ficar reescrevendo código javascript, apenas precisaríamos informar, de alguma forma, como queremos validar os campos e uma função genérica usaria essa informação para realizar a validação para nós.

E como seria essa parametrização ?

Inicialmente pode-se imaginar vetores sendo criados no JavaScript para guardar informações sobre qual campo é obrigatório, qual o tipo de cada campo, se algum campo não deve ser validado, assim por diante. Mas manter tais vetores é muito trabalhoso. Como resolver este problema então ?

O código abaixo demostra uma solução para o problema :

<html>
<head>
<title>New Page 1</title>
<SCRIPT LANGUAGE=javascript>
<!--

function meubotao_onclick() {
alert(form1.teste.testando)
}

//-->
</SCRIPT>
</head>

<body>
<form id=form1>
<input type=text id=teste testando="sss">
<input type=button id=meubotao LANGUAGE=javascript onclick="return meubotao_onclick()">

</form>
</body>

</html>

Observe que no INPUT teste criamos um parâmetro chamado "testando" e acessamos esse parâmetro via JavaScript. O Browser não sabe o que é o parâmetro "testando" e ignora, mas nós podemos acessar essa informação no código.

Isso significa que não precisamos de vetores para guardar as informações sobre validação, basta configurar a própria Tag de forma a determinar como um certo campo será validado. Precisaremos então criar novos parâmetros para a tag INPUT. Veja :

Nossa função genérica precisará exibir mensagens com os erros ocorridos durante o processo de validação. Exibir esse tipo de mensagens usando Alert é, no mínimo, feio. Portanto nossa função dependerá da existência de um objeto chamado "Erro" no qual ela exibirá as mensagens. Isso pode ser uma DIV, pode ser um TD, enfim, o que o designer preferir, desde que se chame "Erro".

Nossa função genérica precisará então percorrer todos os INPUTs de um form verificando os parâmetros inseridos nos INPUTs. Ao encontrar um de nossos parâmetros deve validar aquele campo. Vejamos primeiramente como fica isso com relação a campos obrigatórios.

Para validar campos obrigatórios precisaremos de uma função que elimine espaços de uma string, para evitar que o usuário digite apenas espaços dentro de uma caixa e assim engane a validação. Veja a função abaixo :

// Faz limpeza de strings. Utilizada pela função de validação    de campos obrigatorios
   function limparstring(s)
   {
   while (s.search(" ")!=-1){
   s=s.replace(" ","");
   }
   return(s);
   }

Estamos nesta função utilizando os métodos search e replace de uma variável string. Para quem não sabe, cada tipo de dados do JavaScript age como uma classe e responde a um conjunto de métodos desta classe. A classe string, por exemplo, possui os métodos Search e Replace, entre muitos outros. Assim sendo, qualquer variável string e até mesmo uma string literal responde a esses métodos.

O método replace substitui apenas o 1o caracter encontrado (que atende a busca, 1o parâmetro do replace). Desta forma ele encontra-se dentro de um while para que todos os espaços sejam eliminados.

Uma definição precisa ser feita com relação a COMBOs : Qual o valor default de uma COMBO ? Em geral cria-se um item nulo chamado "-- Selecione --" ou qualquer coisa semelhante e atribui-se um valor padrão para ele. Vamos considerar esse valor padrão como sendo -99.

//Funcao de validacao de campos obrigatorios
   function validar(fr) {
   //Define as variáveis que serão utilizadas nesta função
   var a;
   var s=new String;
   var resp;
   a=0;
   //Limpa a região de mensagens de erro
   erro.innerHTML="";
   resp=true;
   //Faz um laço através dos Inputs contidos no FORM. (coleção    Elements) 
   for(a=0;a<fr.elements.length;a++)
   { 
   //Verifica se o INPUT é obrigatório. Observe o acesso a um parâmetro    criado por nós
   if (fr.elements[a].Obrigatorio=="1")
   {
   //Verifca se a caixa em questão é um INPUT ou uma COMBO
   if(fr.elements[a].tagName!="SELECT"){
   //Se for um INPUT faz a validação para INPUTs que consistem em    ... 
   s=fr.elements[a].value;
   //Limpar a string e verificar se seu tamanho (depois de limpa) é 0. Se    for, ela só tinha espaços em branco
   s=limparstring(s);
   if (s.length==0) {
   //No caso da falta de campo obrigatório, exibe a mensagem de erro
   //Observe a concatenação constante no objeto erro (garantindo    a exibição da mensagem para várias caixas
   // e a utilização do parâmetro Descricao, definido por nós.
   erro.innerHTML=erro.innerHTML + fr.elements[a].Descricao + " &eacute;    informa&ccedil;&atilde;o obrigat&oacute;ria<br>"
   resp=false;
   }
   } else
   { 
   //Caso a caixa seja uma COMBO seu valor é comparado a -99 para saber    se está ou não preenchida
   // A exibição da mensagem de erro é igual
   if (fr.elements[a].item(fr.elements[a].selectedIndex).value==-99) {
   erro.innerHTML=erro.innerHTML + fr.elements[a].Descricao + " &eacute;    informa&ccedil;&atilde;o obrigat&oacute;ria<br>"
   resp=false;
   }
   }
   }
   } 
   // Se algum erro ocorreu, resp contém false e o formulário não    será enviado
   return(resp);
   }

Vejamos um exemplo do uso desse código. Como é um código genérico, podemos simplesmente guarda-lo em um arquivo .JS e fazermos referência a ele pelo <Script SRC=> Veja :

<html>
   <head>
   <title>Nome</title>
   <script language=javascript src="validar.js"></script>
   <SCRIPT LANGUAGE=javascript>
   <!--
function meubotao_onclick() {
   return(validar(form1))
   }
//-->
   </SCRIPT>
   </head>
<body>
   <form id=form1>
   Nome : <input type=text id=txtnome Obrigatorio="1" Descricao="Nome    do Funcionario" size="20" name="txtnome">
   <p>Cargo :&nbsp; <input type="text" name="txtcargo"    size="20" id="txtcargo" Obrigatorio="1" Descricao="Cargo    do Funcionario"></p>
   <p>Salario : <input type="text" name="txtsalario"    size="20" id="txtsalario" Obrigatorio="1" Descricao="Salario    do Funcionario"></p>
   <p><input type=submit id=meubotao LANGUAGE=javascript onclick="return    meubotao_onclick()" value="Enviar">
</p>
</form>
   <div id=erro style="color:red"></div>
   </body>
   </html>
 

Ao invés de chamar a função validar diretamente do submit do form foi criado um evento onClick para o botão submit e ela foi chamada. Essa padronização permite que além das validações genéricas (feitas pela função validar) seja possível incluir uma nova validação personalizada na página a qualquer momento.

Veja abaixo o resultado deste código :

Nome :

Cargo : 

Salario :


O próximo passo será criarmos a função de validação de tipos de dados. A idéia é basicamente a mesma, procurar em toda a coleção de elementos do form pelo parâmetro "tipo" e, de acordo com seu valor, realizar a validação. Veja o código abaixo :

function validartipos(fr)
 {
 //Define as variáveis utilizadas na função
 var resp;
 var a=0;
 var temp;
 var s;
 resp=true;
 //Limpa o objeto de erro
 erro.innerHTML="";
 // Faz o laço através de todos os elementos do form
 for(a=0;a<fr.elements.length;a++)
 { 
 if (fr.elements[a].Tipo=="IN"){
 {  
// Se o tipo for inteiro, faz a validação de valores
   s=fr.elements[a].value;
   s=limparstring(s);
   if (fr.elements[a].Obrigatorio=="1" || s.length>0) {
   // A validação só é feita se o campo for obrigatório    OU se estiver preenchido
   temp=fr.elements[a].value;
   //Utiliza a função isNaN para verificar se é um número    e parseInt para verificar se é inteiro
   if (isNaN(parseInt(temp)))
   { resp=false;
   erro.innerHTML=erro.innerHTML + fr.elements[a].Descricao + " deve conter    um número inteiro<br>";
   }
   }
   }
   }
   if (fr.elements[a].Tipo=="F") {
   //Se o tipo for Float faz a validação
   s=fr.elements[a].value;
   s=limparstring(s);
   if (fr.elements[a].Obrigatorio=="1" || s.length>0) {
   // A validação só é feita se o campo for obrigatório    OU se estiver preenchido
   temp=fr.elements[a].value;
   //Utiliza a função isNaN para verificar se é um número    e parseFloat para verificar se é Float
   if (isNaN(parseFloat(temp)) || parseFloat(temp)<=0)
   { resp=false;
   erro.innerHTML=erro.innerHTML + fr.elements[a].Descricao + " deve conter    um número real positivo<br>";
   }
   }
   }
   if (fr.elements[a].Tipo=="NOM") {
   s=fr.elements[a].value;
   s=limparstring(s);
   if (fr.elements[a].Obrigatorio=="1" || s.length>0) {
   // A validação só é feita se o campo for obrigatório    OU se estiver preenchido
   temp=fr.elements[a].value;
   // Verifica a existencia de espaço para saber se nome e sobrenome foram    preenchidos
   if (temp.indexOf(" ")==-1)
   { resp=false;
   erro.innerHTML=erro.innerHTML + fr.elements[a].Descricao + " deve conter    nome e sobrenome<br>";
   } 
   }
   }
if (fr.elements[a].Tipo=="MAIL") {
   s=fr.elements[a].value;
   s=limparstring(s);
   if (fr.elements[a].Obrigatorio=="1" || s.length>0) {
   // A validação só é feita se o campo for obrigatório    OU se estiver preenchido
   temp=fr.elements[a].value;
   // Verifica a existência de @ e . para validar o e-mail
   if (temp.indexOf("@")==-1 || temp.indexOf(".")==-1)
   { resp=false;
   erro.innerHTML=erro.innerHTML + fr.elements[a].Descricao + " deve conter    um e-mail válido<br>";
   }
   }
   }
}
//Se algo foi inválido, resp contém false
   return(resp); }
 

Agora basta utilizar a função em questão. Veja o exemplo do código abaixo :

<html>
   <head>
   <title>Nome</title>
   <script language=javascript src="validar.js"></script>
   <script language=javascript src="validartipos.js"></script>
   <SCRIPT LANGUAGE=javascript>
   <!--
function meubotao_onclick() {
   var resp
   resp=validar(form1)
   if (resp==false) {
   return(false) }
   else
   { return(validartipos(form1)) }
   }
//-->
   </SCRIPT>
   </head>
<body>
   <form id=form1>
   Nome : <input type=text id=txtnome Obrigatorio="1" Descricao="Nome    do Funcionario" size="20" name="txtnome" Tipo="NOM">
   <p>Cargo :&nbsp; <input type="text" name="txtcargo"    size="20" id="txtcargo" Obrigatorio="1" Descricao="Cargo    do Funcionario"></p>
   <p>Salario : <input type="text" name="txtsalario"    size="20" id="txtsalario" Obrigatorio="1" Descricao="Salario    do Funcionario" Tipo="F"></p>
   <p><input type=submit id=meubotao LANGUAGE=javascript onclick="return    meubotao_onclick()" value="Enviar">
   </p>
</form>
   <div id=erro style="color:red"></div>
   </body>
</html>

Basicamente o mesmo código, adicionando-se a valiação por tipo. Veja como fica o resultado :

Nome :

Cargo : 

Salario :

 

Desta forma temos um modo fácil de realizarmos a validação no client. Sempre que desejarmos validar algo bastará chamar as funções definidas acima e parametrizar nas tags a validação que se deseja fazer.

Em nossa área de download você encontrará os arquivos (JS) referentes a esse artigo.

Dennes Torres
MCSD,MCSE,MCDBA



� Búfalo Informática, Treinamento e Consultoria - Rua Álvaro Alvim, 37 Sala 920 - Cinelândia - Rio de Janeiro / RJ
Tel.: (21)2262-1368 (21) 9240-5134 (21) 9240-7281 e-Mail:
contato@bufaloinfo.com.br