Continuación del ejemplo de onblur, para validar varios campos de texto

  • Por
Hacemos un ejemplo de validación de campos de un formulario utilizando como base el evento onblur y solucionando un problema de bucle infinito.

Hemos visto en el ejemplo del método onblur relatado anteriormente una posible técnica para comprobar los datos de un campo de formulario. Ahora vamos a ver cómo evolucionar esta técnica si tenemos más de un campo a validar, dado que se puede complicar bastante el problema.

De hecho, antes de leer nuestra solución propuesta, creo que sería un buen ejercicio a realizar por el lector la práctica de hacer ese mismo ejemplo para dos campos y trabajar un poco con la página a ver si encontramos algún problema.

Muy probablemente nos encontraremos con un curioso bucle infinito que nos va a dar más de un quebradero de cabeza para solucionarlo.

En la práctica, el lector puede intentar validar un número entero y un código postal. Para validar un código postal necesitamos comprobar que es una cadena de texto compuesta por 5 caracteres y todos son enteros, por lo menos para los códigos en España.

Por si alguien lo quiere intentar, la función para validar un código postal sería algo parecido a esto:

function ValidoCP(){ 
   	CPValido=true 
   	//si no tiene 5 caracteres no es válido 
   if (document.f1.codigo.value.length != 5) 
         CPValido=false 
      else{ 
         for (i=0;i<5;i++){ 
            CActual = document.f1.codigo.value.charAt(i) 
            if (validarEntero(CActual)==""){ 
               CPValido=false 
               break; 
            } 
         } 
      } 
   return CPValido 
}

Simplemente se encarga de comprobar que el campo de texto contiene 5 caracteres y hacer un recorrido por cada uno de los caracteres para comprobar que todos son enteros. Al principio se supone que el código postal es correcto, colocando la variable CPValido a true, y si alguna comprobación falla se cambia el estado correcto a incorrecto, pasando dicha variable a false.

Se puede probar a montar el ejemplo con dos campos... nosotros ahora vamos a dar una solución al problema bastante complicadilla, ya que incluimos instrucciones para evitar el efecto del bucle infinito. No vamos a ver el ejemplo que daría el error, lo dejamos para el que desee intentarlo por si mismo y recomendamos hacerlo porque así comprenderemos mejor el siguiente código.

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

<script> 
avisado=false 
function validarEntero(valor){ 
      //intento convertir a entero. 
      //si era un entero no le afecta, si no lo era lo intenta convertir 
       valor = parseInt(valor)

      //Compruebo si es un valor numérico 
      if (isNaN(valor)) { 
         //entonces (no es numero) devuelvo el valor cadena vacia 
         return "" 
      }else{ 
         //En caso contrario (Si era un número) devuelvo el valor 
         return valor 
      } 
}

function compruebaValidoEntero(){ 
   enteroValidado = validarEntero(document.f1.numero.value) 
   if (enteroValidado == ""){ 
      //si era la cadena vacía es que no era válido. Lo aviso 
      if (!avisado){ 
         alert ("Debe escribir un entero!") 
         //selecciono el texto 
         document.f1.numero.select() 
         //coloco otra vez el foco 
         document.f1.numero.focus() 
         avisado=true 
         setTimeout('avisado=false',50) 
      } 
   }else 
      document.f1.numero.value = enteroValidado 
}

function compruebaValidoCP(){ 
   CPValido=true 
   //si no tiene 5 caracteres no es válido 
   if (document.f1.codigo.value.length != 5) 
      CPValido=false 
   else{ 
      for (i=0;i<5;i++){ 
         CActual = document.f1.codigo.value.charAt(i) 
         if (validarEntero(CActual)==""){ 
            CPValido=false 
            break; 
         } 
      } 
   } 
   if (!CPValido){ 
      if (!avisado){ 
         //si no es valido, Lo aviso 
         alert ("Debe escribir un código postal válido") 
         //selecciono el texto 
         document.f1.codigo.select() 
         //coloco otra vez el foco 
         //document.f1.codigo.focus() 
         avisado=true 
         setTimeout('avisado=false',50) 
      } 
   }	
} 
</script>

</head> 
<body>

<form name=f1> 
Escriba un número entero: <input type=text name=numero size=8 value="" onblur="compruebaValidoEntero()"> 
<br> 
Escriba un código postal: <input type=text name=codigo size=8 value="" onblur="compruebaValidoCP()"> *espera una cadena con 5 carácteres numéricos

</form>

</body> 
</html>

Este ejemplo sigue la guía del primer ejemplo de onblur de este artículo, incluyendo un nuevo campo a validar.

Para solucionar el tema del bucle infinito, que habréis podido investigar por vosotros mismos y en el que se mostraban una caja de alerta tras otra indefinidamente, hemos utilizado una variable llamada avisado que contiene un true si ya se ha avisado de que el campo estaba mal y un false si no se ha avisado todavía.

Cuando se va a mostrar la caja de alerta se comprueba si se ha avisado o no al usuario. Si ya se avisó no se hace nada, evitando que se muestren más cajas de alerta. Si no se había avisado todavía se muestra la caja de alerta y se coloca el foco en el campo que era incorrecto.

Para restituir la variable avisado a false, de modo que la próxima vez que se escriba mal el valor se muestre el mensaje correspondiente, se utiliza el método setTimeout, que ejecuta la instrucción con un retardo, en este caso de 50 milisegundos. Lo suficiente para que no se meta en un bucle infinito.

Nota: Después de todos los parches que hemos tenido que colocar para que este evento se comporte correctamente para cumplir el cometido deseado, es posible que no merezca la pena utilizarlo para este cometido. Podemos hacer uso del evento onchange, o comprobar todos los campos de una sola vez cuando el usuario ha decidido enviarlo.

Podemos ver en marcha este ejemplo en una página aparte.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

irla

03/10/2006
Si el cp contiene un cero no valida. Esta mal hecho.

fiu

24/10/2006
Exacto, los ceros los da por erróneos, además seria conveniente comprobar que las 2 primeras cifras van del 01 al 52, que son los números que representan la província, los 3 siguientes son los de la localidad, aunque esos seria imposible controlarlos.

Geovanny Angulo

09/9/2010
FELICITACIONES
Demasiado bueno los ejemplos de la funcin onblur...