Você está em: Home > Javascript/AJAX/DHTML > Visualizando artigo

Iniciando no Javascript: Exemplo do evento onblur - Parte 2

Autor/fonte: CriarWeb.com
E-mail/Url: http://www.criarweb.com/artigos/403.php

[ Indicar a um amigo ] [ Translate to english ] [ Imprimir ]

Vimos o exemplo no exemplo do método onblur relatado anteriormente uma possível técnica para comprovar os dados de um campo de formulário. Agora vamos ver como evoluir esta técnica se tivermos mais de um campo a validar, dado que se pode complicar bastante o problema.

De fato, antes de ler nossa solução proposta, creio que seria um bom exercício para o leitor praticar esse mesmo exemplo para os dois campos e trabalhar um pouco com a página para ver se encontramos algum problema.

Muito provavelmente, encontraremos com um curioso loop infinito que nos vai dar mais quebra-cabeça para solucionar.

Na prática, o leitor pode tentar validar um número inteiro e um código postal. Para validar um código postal necessitamos comprovar que é uma cadeia de texto composta geralmente por 5 caracteres e todos são inteiros.

Se alguém quiser tentar, a função para validar um código postal seria algo parecido com isto:

function ValidoCP(){
    CPValido=true
    //se não tem 5 caracteres não é válido
   if (document.f1.codigo.value.length != 5)
         CPValido=false
      else{
         for (i=0;i<5;i++){
            CAtual = document.f1.codigo.value.charAt(i)
            if (validarInteiro(CAtual)==""){
               CPValido=false
               break;
            }
         }
      }
   return CPValido
}

Simplesmente se encarrega de comprovar que o campo de texto contém 5 caracteres e de fazer um percorrido por cada um dos caracteres para comprovar que todos são inteiros. A princípio se supõem que o código postal é correto, colocando a variável CPValido a true, e se alguma comprovação falha muda-se o estado correto a incorreto, passando tal variável a false.

Pode-se comprovar ao montar o exemplo com dois campos... nós agora vamos dar uma solução ao problema bastante complicadinha, pois incluímos instruções para evitar o efecto do loop infinito. Não vamos ver o exemplo que daria o erro, deixamos para aqueles que desejarem tentar por si mesmo e recomendamos fazer isto porque assim, compreenderemos melhor o seguinte código:

<html>
<head>
    <title>Evento onblur</title>

<script>
avisado=false
function validarInteiro(valor){
      //tento converter a inteiro.
      //se era um inteiro nao lhe afeta, e se nao era tenta converte-lo
       valor = parseInt(valor)

      //Comprovo se é um valor numérico
      if (isNaN(valor)) {
         //entao (nao é numero) devolvo o valor cadeia vazia
         return ""
      }else{
         //No caso contrario (Se era um número) devolvo o valor
         return valor
      }
}

function comprovaValidoInteiro(){
   inteiroValidado = validarInteiro(document.f1.numero.value)
   if (interoValidado == ""){
      //se era a cadeia vazia é que nao era válido. Aviso
      if (!avisado){
         alert ("Deve escrever um inteiro!")
         //seleciono o texto
         document.f1.numero.select()
         //coloco outra vez o foco
         document.f1.numero.focus()
         avisado=true
         setTimeout('avisado=false',50)
      }
   }else
      document.f1.numero.value = inteiroValidado
}

function comprovaValidoCP(){
   CPValido=true
   //se nao tem 5 caracteres nao é válido
   if (document.f1.codigo.value.length != 5)
      CPValido=false
   else{
      for (i=0;i<5;i++){
         CAtual = document.f1.codigo.value.charAt(i)
         if (validarInteiro(CAtual)==""){
            CPValido=false
            break;
         }
      }
   }
   if (!CPValido){
      if (!avisado){
         //se nao é valido, aviso
         alert ("Deve escrever um código postal válido")
         //seleciono o texto
         document.f1.codigo.select()
         //coloco outra vez o foco
         //document.f1.codigo.focus()
         avisado=true
         setTimeout('avisado=false',50)
      }
   }
}
</script>

</head>
<body>

<form name=f1>
Escreva um número inteiro: <input type=text name=numero size=8 value="" onblur="comprovaValidoInteiro()">
<br>
Escreva um código postal: <input type=text name=codigo size=8 value="" onblur="comprovaValidoCP()"> *espera uma cadeia com 5 carácteres numéricos

</form>

</body>
</html>

Este exemplo continua a guia do primeiro exemplo de onblur deste artigo, incluiendo um novo campo a validar.

Para solucionar o tema do loop infinito, que vocês poderam investigar por vocês mesmos e no qual se mostrava uma caixa de alerta atrás da outra indefinidamente, utilizamos uma variável chamada avisado que contem um true se já foi avisado de que o campo estava mal e um false se ainda não foi avisado.

Quando se mostra a caixa de alerta, se comprova se foi avisado ou não ao usuário. Se já foi avisado não se faz nada, evitando que se mostrem mais caixas de alerta. Se ainda não foi avisado mostra-se a caixa de alerta e coloca-se o foco no campo que era incorreto.

Para restituir a variável avisado a false, de modo que a próxima vez que se escreva mal o valor se mostre a mensagem correspondente, se utiliza o método setTimeout, que executa a instrução com um atraso, neste caso de 50 milésimos de segundos. O suficiente para que não se meta em um loop infinito.

Nota: Depois de todos os apetrechos que tivemos que colocar para que este evento se comporte corretamente para cumprir com o objetivo desejado, é possível pensar que não vale a pena utiliza-lo neste objetivo. Podemos fazer uso do evento onchange, ou comprovar todos os campos de uma vez só quando o usuário decidiu envia-lo.