
Validar que el texto introducido en un formulario HTML es realmente un número es, quizas, el código JavaScript más utilizado a lo largo de la red. No en vano, si nos ponemos a pensar en el tipo de validaciones que se hacen dentro de un formulario, estas se limitaran a tamaños de cadenas, validaciones de número o, en los casos más avanzados, en patrones o expresiones regulares.
Y es que la potencia de detección de patrones en JavaScript puede ayudarnos a resolver cualquier validación que queramos hacer en un formulario HTML. Como veremos más adelante en el caso que nos compete.
Para empezar tenemos un formulario HTML simple, en el cual incluiremos un campo de texto mediante una etiqueta <INPUT>.
La idea es que cuando la persona teclee algo sobre este campo y se vaya a otro realicemos la validación sobre si es o no un número.
A si que lo primero que tenemos que hacer es controlar el evento onChange el cual nos indicará que el contenido del campo ha cambiado con respecto al anterior ha cambiado y nos hemos ido a otro elemento de la página. Y asociaremos a este evento la función de validación.
Quedándonos la siguiente línea de código:
Como podemos ver, la función está recibiendo como parámetro el valor que haya en el campo del formulario. Si bien, podemos utilizar cualquier otro evento que nos pueda venir bien.
Ahora solo nos quedará codificar la función JavaScript que valide si lo recibido es un número. Como hemos dicho al principio, nos vamos a basar en patrones. Es decir, la idea es validar que los caracteres pasados son números y tendremos que compararlo contra un patrón que signifique eso.
Los patrones en JavaScript son expresiones regulares. Una expresión regular se define de la siguiente forma:
/^ expr regular $/
Es decir, siempre empieza por «/^» y acaba por $/.
Si con una empresión regular queremos validar que un caracter sa un número utilizaremos el rango [0-9], quedándonos la expresión de la siguiente forma:
/^[0-9]$/
Si queremos indicar que van a ser un conjunto de caracteres deberemos de utlizar un operador de cardinalidad. En este caso deberemos de utilizar el * para indicar que serán n caracteres. Ahora, nos quedará de la siguiente forma:
/^([0-9])*$/
Sobre la expresión regular se aplicará el método test, el cual recibe el dato a ser contrastado con la expresión regular. Es por ello que nuestra función de validación de números quedaría de la siguiente forma:
Ojo, que en la validación estamos indicando que sea diferente a la expresión regular definida. De ahí el simbolo exclamación (!). Que lo que hace es negar lo puesto después.
La función la deberemos de poner en la cabecera de la página para que pueda ser utilizada desde cualquier parte de la página.
Estanis Peralta Valls
Tengo una duda al respecto del pattern (expresión regular) entiendo que ha de empezar por un número ( rango [0-9] ) y que puede tener un número indeterminado de números, pero si el valor a comprobar fuera un número de n caracteres y después un carácter no numérico ( por ejemplo 135gho ) que nos devolvería el pattern? No observo ningún elemento excluyente de caracteres no numéricos y cómo tendría que ser el pattern para que no incluyese caracteres no numéricos?
Alexis
No se ve el la forma que mencione,,,, que mal
Alexis
Hola , creo que esta es otra forma de realizar la validación de solo numero en un campo de texto.
Esto solo necesita de javascript.
Alexis
aquiles
Muchas gracias por tu explicación es un gran aporte.
Víctor Cuervo
Me alegro que te haya gustado.
Saludos.
brayan
Excelente, me ayudo mucho
brayan
excelente, solucione mi problema
Víctor Cuervo
Nos encanta escuchar que ha resuelto tu problema. A ver si lo conseguimos en otras ocasiones.
Saludos.
Víctor Cuervo
@Emilio,
Muchas gracias por tu comentario. :-D
Emilio
Buen aporte, excelente!!
Pau
no me pesquen … funciono XD, era problema del navegador.. no se porque no se actualiza ¬¬ ocupe otro y funciono XD
Pau
si pongo 67h no manda el mensaje de no es numero :/
porque???
Jessica
De verdad muy bueno MUCHAS GRACIAS!!!!, simple, preciso y rapido.
lineadecodigo
@newcomeralmeida,
Puedes poner las preguntas en el foro.
http://www.dudasprogramacion.com/
newcomeralmeida
hola soy nuevo kisiera saber donde puedo dejar algunas dudas que tengo
tesito
a mi me pareció muy bueno, gracias
lineadecodigo
@Rata,
Tienes toda la razón. Son comentarios que se nos habían escapado. Ya está todo solucionado.
Gracias por tu aporte.
Rata
Debrian tener sensura en este foro hijos de su chingadamadre
DegoChan
yo cambiaría el código de 1. Ronald Lugo a onkeypress asi si se presiona una tecla sin soltarla no escribe nada ;)
gracias por el código lo utilizo.
saludos
wilson jimenez
gracias por su colaboracion esta funcion fue de mucha ayuda
heracleo
funcion para que valide la introduccion de caracteres no validos como » » y ‘ ‘
Ronald Lugo
Esta función es muy buena, lo único en lo que la modificaría es en retornar el valor sin el caracter distinto a número. es decir:
function validarSiNumero(object)
{
numero = object.value;
if (!/^([0-9])*$/.test(numero))
object.value = numero.substring(0,numero.length-1);
}
y en el html no lo cargaría en el evento onChange si no en el evento OnKeyUp, para que lo valide cada vez que el usuario lo digita.
Gracias por el artículo … =)