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.
Miguel Angel Alvarez
Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online Escu...