El siguiente ejemplo muestra la forma de validar la entrada de un campo de texto, en el cual solo admitiremos números. El requerimiento de la validación seria de la forma siguiente:
-
Si el usuario presiona una tecla (o una combinación), validar que esta corresponda a la de un numero (0-9):
- Si corresponde: Permitir que el carácter se muestre en el campo de texto.
- Si no corresponde: No permitir que este se muestre y continuar.
Sencillo!!!!… No?????
UN POCO DE TEORIA
El cliente o navegador (Firefox, Internet Explorer, Opera, etc) expone del lado del cliente una serie de objetos usados para el control y despliegue del contenido que carga, así como también para el control o manejo del mismo.
Uno de los objetos más usados es el objeto conocido como el Manejador de Eventos (Event Handler). Este objeto expone y gestiona una colección de eventos que pueden ser accedidos por medio de ciertas acciones que el usuario realiza sobre la ventana y/o sobre el contenido (objetos) del navegador, desde un simple movimiento del puntero, hasta un “click” o la activación de una tecla al presionarla.
Cada objeto, de acuerdo a un estándar establecido de forma oficial, se asocia a un número N de eventos solamente. No están definidos todos los eventos para todos los objetos a usar, mas sin embargo se pueden simular casos especiales por medio de la combinación de algunos de los ya asociados al objeto.
Una validación depende grandemente de estos eventos, ya que es construida en base a estos. El contexto del mismo evento define la lógica que la validación implementara. No significa que estrictamente se asocia a un solo tipo de evento, pero si impone un factor de compatibilidad en base a cuales pueden ser aplicados.
LA FORMA
Como primer paso crearemos una forma básica en HTML con un solo campo de texto:
<html> <head> <title>Validación con Javascript: Ingresar/Permitir solo números</title> <script type="text/javascript" src="validacion.js"></script> </head> <body> <center> <form> Caja de Texto: <input type="text" onkeypress="return soloNumeros(event);" /> </form> </center> </body> </html>
Como buena práctica, se importa o asocia el archivo de Javascript sobre el cual codificaremos nuestra validación (aunque es válido, no codificamos la validación en el mismo archivo por buena práctica, y también porque la verdad resulta ser un desmadre confuso).
Noten que el cuadro de texto ya tiene asociado una sentencia de Javascript en su propiedad onkeypress. Esa sentencia será procesada cada vez que el evento keypress suceda dentro de la caja de texto.
Si analizamos la sentencia de Javascript nos daremos cuenta de lo siguiente:
- Cuando el evento ocurre, se ejecuta la función soloNumeros(..).
- La función recibe como parámetro la referencia del evento que el manejador de eventos carga en la variable global event (una madre complicado, pero espero y lo entiendan).
- Una vez que la función termina nos regresa un valor, y este a su vez se lo enviamos al evento por medio de return.
- Si la respuesta es booleana (que para nuestro caso debe ser así) permitirá controlar el flujo de los eventos a seguir: TRUE para continuar, FALSE para detener.
Ahora, si queremos analizar esto desde un punto más claro hacia con el requerimiento, tenemos lo siguiente:
-
Al presionar cualquier tecla (onkeypress), se inicia la validación (soloNumeros(…)).
- Si cumple (return true), se continua la ejecución.
- Si no cumple (return false), se detiene la ejecución.
El detener la ejecución implica entre otras cosas, el detener la rutina que carga el carácter sobre la caja.
NOTA: Solo se detienen las rutinas contiguas al evento y al objeto detonado y solamente en el momento que se detono. De ninguna manera detendrá rutinas en ejecuciones posteriores ni tampoco en las hechas sobre otros objetos.
LA VALIDACION
Dejando claro lo anterior (espero y lo hayan comprendido, si no ya se jodieron), continuamos ahora con la validación. A continuación el código:
/*****************************************************************/
/*Regresa TRUE si el codigo del caracter corresponde a un numero,*/
/*de lo contrario regresa FALSE. */
/*****************************************************************/
function soloNumeros(evt)
{
//Validar la existencia del objeto event
evt = (evt) ? evt : event;
//Extraer el codigo del caracter de uno de los diferentes grupos de codigos
var charCode = (evt.charCode) ? evt.charCode : ((evt.keyCode) ? evt.keyCode : ((evt.which) ? evt.which : 0));
//Predefinir como valido
var respuesta = true;
//Validar si el codigo corresponde a los NO aceptables
if (charCode > 31 && (charCode < 48 || charCode > 57))
{
//Asignar FALSE a la respuesta si es de los NO aceptables
respuesta = false;
}
//Regresar la respuesta
return respuesta;
}
A simple vista se ve algo confuso, pero veamos qué es lo que sucede en la función de Javascript lo mas “línea por línea” posible:
-
evt = (evt) ? evt : event;
- Se valida que el parámetro sea diferente de NULL o FALSE (para esto no es necesario hacer la igualación con ambos). Si es diferente, simplemente se reasigna la referencia a la variable misma (esto es una mala práctica, pero es una validación necesaria). Si es igual, entonces se asigna de forma directa la referencia actual del evento.
-
var charCode = (evt.charCode) ? evt.charCode : ((evt.keyCode) ? evt.keyCode : ((evt.which) ? evt.which : 0));
- Todos los códigos del teclado se encuentran organizados en 3 grupos principales, divididos en base al tipo de función que realizan o carácter que representan. El código se carga en la propiedad que refleja. La línea descrita obtiene el código de la tecla desde cualquiera de los tres grupos (obviamente lo extrae del grupo al cual pertenece) y lo carga en la variable charCode. El valor cargado es de tipo numérico.
-
var respuesta = true;
- Predefine la variable de respuesta como válida (true) para todos los casos.
-
if (charCode > 31 && (charCode < 48 || charCode > 57)) { respuesta = false; }- Ahora se valida el código numérico contenido en charCode (analicen detalladamente la condición!!!). Si el código pertenece al rango de los que representan los números del teclado, se ignora el bloque interno de la condición; si no, se ejecuta el código del bloque, en cual solo se asigna el valor de false a la variable de respuesta.
-
return respuesta;
- Regresa el valor de la variable de respuesta.
ULTIMAS LINEAS
Como pueden observar, es algo relativamente sencillo. Espero y lo hayan entendido, si no, estudien lo más que puedan y practiquen más. Estén pendientes de más artículos de Javascript en el futuro.
Actualizado: Miercoles 5 de Agosto del 2009 – J.R.