Validar entero en campo de formulario

  • Por
  • 11 de marzo de 2002
  • Valoración:
  • 21 Comentarios
  • Scripts en Javascript
Script para validar un campo de formulario de manera que sepamos seguro que dentro del campo hay siempre un número entero.
Supongamos que tenemos un campo de un formulario donde queremos que figure siempre un valor numérico entero. Un ejemplo podría ser un campo donde queremos guardar el número de un año, donde, lógicamente, no caben decimales ni tampoco letras.

En este ejercicio vamos a realizar un script que procure obtener un número entero del valor que haya escrito el usuario en un campo de texto. Si es un entero o puede convertirlo a un entero, coloca dicho valor entero en el campo. Si no puede obtener un valor numérico entero borra el contenido del campo y lo deja vacío. Lo haremos con Javascript, ya que es el lenguaje del lado del cliente –para operar en el ámbito del navegador- más extendido.

Para aclarar el funcionamiento del ejercicio podemos ver el ejemplo completo en una página a parte.

Este ejercicio sirve también para aprender a manejar las funciones incorporadas de Javascript parseInt() e isNaN(). La primera sirve para convertir un valor a número entero y la segunda para ver si un dato es un valor numérico. Las dos se pueden conocer en profundidad en el los primeros capítulos del manual de Javascript II.

Otro tema importante que hay que conocer es la jerarquía de objetos del navegador, pero en este caso haremos un esfuerzo en explicarla para aquellas personas que no la conozcan.

Función validarEntero()

Primero vamos a realizar una función que hará la mayor parte del trabajo, puesto que es la encargada de validar si un dato es un número entero. Esta función recibe un valor, que es el dato que deseamos validar y si es un entero lo devolverá tal cual. Si no lo es, lo intentará convertir a entero y si lo consigue devolverá ese valor. Finalmente, si el intento de convertirlo no da resultado, devolverá una cadena vacía.

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
      }
}

Formulario

Vemos el formulario que necesitaremos para colocar el campo de texto. Es un formulario como otro cualquiera, el único detalle es que nos hemos preocupado por darle nombre tanto al formulario en si como al campo de texto. Posteriormente utilizaremos esos nombres para referirnos a los elementos mediante Javascript.

También tenemos un campo de formulario de tipo botón, que sirve en este caso para indicar que cuando se pulse se llamará a la función validarFormulario(). Para indicar esto se utiliza el atributo onclick del campo botón y entre comillas podemos ver lo que queremos que se ejecute, en este caso la función indicada.

<form name=formul>
<input type=text name=texto>
<input type=button value=validar onclick=”validarFormulario()”>
</form>

Función validarFormulario()

Esta función extrae el dato del campo de texto y lo pasa a la función validarEntero(), que nos devolverá un valor que tendremos que colocar de nuevo en el campo de texto. Para acceder al formulario utilizamos la jerarquía de objetos del navegador, que para el que no lo sepa, es un conjunto de objetos que hacen referencia a todos los elementos de la página.

El acceso a los elementos de la página se realiza empezando en el objeto window, que es el primero de la jerarquía. Luego continúa por el objeto document –que guarda todo el documento- y en nuestro ejemplo, bajaremos al formulario para poder acceder definitivamente al campo de texto, que era donde queríamos llegar. Con este esquema:

window.document.formul.texto

Nos fijamos que se utilizan los nombres del formulario y el campo que hemos colocado en el atributo name de las etiquetas HTML de estos elementos.

Todos los campos de texto tienen una propiedad value que es donde se guarda el texto que lleva escrito dentro. De modo que si queremos acceder a lo que tiene escrito el campo de texto escribiremos esto:

window.document.formul.texto.value

Ahora que sabemos todo lo anterior deberíamos entender perfectamente el código de la función.

function validarFormulario(){
      //extraemos el valor del campo
      textoCampo = window.document.formul.texto.value
      //lo validamos como entero
      textoCampo = validarEntero(textoCampo)
      //colocamos el valor de nuevo
      window.document.formul.texto.value = textoCampo
}

Conclusión

Con todo esto tenemos completado el ejercicio. Podemos ver como funcionaría la página entera para observar los resultados finales.

Por si sólo puede que no haya resultado muy productivo este ejemplo, pero puede ser un comienzo para empezar a validar formularios más complejos. Con un poco de imaginación y esfuerzo podemos hacer funciones que validen otros campos del formulario para ver si lo que contienen son textos, si son lo suficientemente largos o cortos, validar números con decimales, etc. Todo ello se haría de manera similar a como hemos visto, añadiendo código a la función validarFormulario() y tal vez construyendo algunas funciones accesorias adicionales como validarEntero().

Esperamos que haya servido de provecho, aunque sea un poco.

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.

Comentarios

Luis Egas

23/10/2005
Muy interesante y didactico. Sigan adelante felicitaciones!!!

Miguel Hernández Montano

13/3/2006
El programa no funciona cuando coloco cero (0) antes de cualquier número, por ejemplo: 012, no me devuelve 12 como debería de ser lo correcto, sino otra cantidad.

riokochan

17/5/2006
no devuelve nada al ir a validar :S :S

uri

17/10/2006
Por fin!!!
Llevaba unas cuantas horas buscando como validar campo numérico y ha sido la única página que me ha servido de utilidad!!

Felicidades desarrolloweb!!

Fabian

21/12/2006
Revisen nuevamente el código para validar. Sucede que si ingresas "123kkk", es decir, números y a continuación sólo letras, al parecer parseInt(valor) convierte de todos modos a entero, dejando el valor en "123".

Les recomiendo que no lo usen hasta que lo puedan corregir.

Maxi

15/8/2007
Que pasa si validas este campo: 33b
Parece que pincha como loco

Fernando

25/11/2007
Ante todo muchas gracias por todos los articulos k me han sido de mucha ayuda. Tengo un problema con este scripts y muchos con javascript por ejemplo la funcion parseInt() ningun navegador me lo reconoce ni me tiran error de js tampoco, el javascript lo tengo habilitado, asi que no se trata de eso. la verdad no se que pueda ser. y tampoco se trata de la version porqeu he probado distintas y siempre ocurre lo mismo, pero accedi desde otros lugares y el script que esta aca anda. Si tienen alguna idea de lo que pueda ser por favor mandenme una respuesta. Muchas gracias...

Zoichi

25/1/2008
Fabian tiene razón, si se pone un número 123kkk, la función parseInt nos va a devolver 123, pero es no es lo que queríamos hacer. A mí me funciona el siguiente código:

if(!eregi("^[0-9]{4,}$",$cadena)){
/*la variable tiene algún valor no númerico, poner aquí las acciones para ese caso*/
}else{
/*La variable es un número*/
}

lo que hace básicamente ese código es:

-Revisar que la variable $cadena tenga dígitos entre 0 y 9:

[0-9]

y que tenga como mínimo 4 dígitos (me sirve si quiero revisar por ej. un número de teléfono):

{4,}

Para más información sobre la función eregi, le sugiero revisar: http://weblogtoolscollection.com/regex/regex.php
excelente compilación.

Zoichi

25/1/2008
----Actualización!-----
El código que puse es para php (jeje, pensé que el artículo era de php :P) así que si lo usan en javascript no les va a funcionar, pero existe un método análago en javascript, que es el siguiente:

if (miCadena.match(/^d+$/)){
/*la variable miCadena es numérico*/
}else{
/*no es númerico*/
}

El regex:

/^d+$/

Filtra cadenas que consistan únicamente de dígitos.
Vean esa página para más información:
http://www.regular-expressions.info/javascript.html

j@x

14/2/2008
var defaultEmptyOK = false
var checkNiceness = true;
var digits = "0123456789";
var lowercaseLetters = "abcdefghijklmnopqrstuvwxyzáéíóúñü"
var uppercaseLetters = "ABCDEFGHIJKLMNOPQRSTUVWXYZÁÉÍÓÚÑ"
var whitespace = " ";
var phoneChars = "()-+ ";
var mMessage = "Error: no puede dejar este espacio vacio"
var pPrompt = "Error: ";
var pAlphanumeric = "ingrese un texto que contenga solo letras y/o numeros";
var pAlphabetic = "ingrese un texto que contenga solo letras";
var pInteger = "ingrese un numero entero";
var pNumber = "ingrese un numero";
var pPhoneNumber = "ingrese un número de teléfono";
var pEmail = "ingrese una dirección de correo electrónico válida";
var pName = "ingrese un texto que contenga solo letras, numeros o espacios";
var pNice = "no puede utilizar comillas aqui";

function makeArray(n) {
for (var i = 1; i <= n; i++) {
this[i] = 0
}
return this
}

function isEmpty(s)
{ return ((s == null) || (s.length == 0))
}

function isWhitespace (s)
{ var i;
if (isEmpty(s)) return true;
for (i = 0; i < s.length; i++)
{
var c = s.charAt(i);
// si el caracter en que estoy no aparece en whitespace,
// entonces retornar falso
if (whitespace.indexOf(c) == -1) return false;
}
return true;
}


function stripCharsInBag (s, bag)
{ var i;
var returnString = "";

// Buscar por el string, si el caracter no esta en "bag",
// agregarlo a returnString

for (i = 0; i < s.length; i++)
{ var c = s.charAt(i);
if (bag.indexOf(c) == -1) returnString += c;
}

return returnString;
}


function stripCharsNotInBag (s, bag)
{ var i;
var returnString = "";
for (i = 0; i < s.length; i++)
{
var c = s.charAt(i);
if (bag.indexOf(c) != -1) returnString += c;
}

return returnString;
}


function stripWhitespace (s)
{ return stripCharsInBag (s, whitespace)
}

function charInString (c, s)
{ for (i = 0; i < s.length; i++)
{ if (s.charAt(i) == c) return true;
}
return false
}

function stripInitialWhitespace (s)
{ var i = 0;
while ((i < s.length) && charInString (s.charAt(i), whitespace))
i++;
return s.substring (i, s.length);
}

function isLetter (c)
{
return( ( uppercaseLetters.indexOf( c ) != -1 ) ||
( lowercaseLetters.indexOf( c ) != -1 ) )
}

function isDigit (c)
{ return ((c >= "0") && (c <= "9"))
}

function isLetterOrDigit (c)
{ return (isLetter(c) || isDigit(c))
}

function isInteger (s)
{ var i;
if (isEmpty(s))
if (isInteger.arguments.length == 1) return defaultEmptyOK;
else return (isInteger.arguments[1] == true);

for (i = 0; i < s.length; i++)
{
var c = s.charAt(i);
if( i != 0 ) {
if (!isDigit(c)) return false;
} else {
if (!isDigit(c) && (c != "-") || (c == "+")) return false;
}
}
return true;
}


function isNumber (s)
{ var i;
var dotAppeared;
dotAppeared = false;
if (isEmpty(s))
if (isNumber.arguments.length == 1) return defaultEmptyOK;
else return (isNumber.arguments[1] == true);

for (i = 0; i < s.length; i++)
{
var c = s.charAt(i);
if( i != 0 ) {
if ( c == "." ) {
if( !dotAppeared )
dotAppeared = true;
else
return false;
} else
if (!isDigit(c)) return false;
} else {
if ( c == "." ) {
if( !dotAppeared )
dotAppeared = true;
else
return false;
} else
if (!isDigit(c) && (c != "-") || (c == "+")) return false;
}
}
return true;
}

function isAlphabetic (s)
{ var i;

if (isEmpty(s))
if (isAlphabetic.arguments.length == 1) return defaultEmptyOK;
else return (isAlphabetic.arguments[1] == true);
for (i = 0; i < s.length; i++)
{
// Check that current character is letter.
var c = s.charAt(i);

if (!isLetter(c))
return false;
}
return true;
}

function isAlphanumeric (s)
{ var i;

if (isEmpty(s))
if (isAlphanumeric.arguments.length == 1) return defaultEmptyOK;
else return (isAlphanumeric.arguments[1] == true);

for (i = 0; i < s.length; i++)
{
var c = s.charAt(i);
if (! (isLetter(c) || isDigit(c) ) )
return false;
}

return true;
}


function isName (s)
{
if (isEmpty(s))
if (isName.arguments.length == 1) return defaultEmptyOK;
else return (isAlphanumeric.arguments[1] == true);

return( isAlphanumeric( stripCharsInBag( s, whitespace ) ) );
}

function isPhoneNumber (s)
{ var modString;
if (isEmpty(s))
if (isPhoneNumber.arguments.length == 1) return defaultEmptyOK;
else return (isPhoneNumber.arguments[1] == true);
modString = stripCharsInBag( s, phoneChars );
return (isInteger(modString))
}

function isEmail (s)
{
if (isEmpty(s))
if (isEmail.arguments.length == 1) return defaultEmptyOK;
else return (isEmail.arguments[1] == true);
if (isWhitespace(s)) return false;
var i = 1;
var sLength = s.length;
while ((i < sLength) && (s.charAt(i) != "@"))
{ i++
}

if ((i >= sLength) || (s.charAt(i) != "@")) return false;
else i += 2;

while ((i < sLength) && (s.charAt(i) != "."))
{ i++
}

if ((i >= sLength - 1) || (s.charAt(i) != ".")) return false;
else return true;
}

function isNice(s)
{
var i = 1;
var sLength = s.length;
var b = 1;
while(i<sLength) {
if( (s.charAt(i) == """) || (s.charAt(i) == "'" ) ) b = 0;
i++;
}
return b;
}

function statBar (s)
{ window.status = s
}

function warnEmpty (theField)
{ theField.focus()
alert(mMessage)
statBar(mMessage)
return false
}

function warnInvalid (theField, s)
{ theField.focus()
theField.select()
alert(s)
statBar(pPrompt + s)
return false
}


function checkField (theField, theFunction, emptyOK, s)
{
var msg;
if (checkField.arguments.length < 3) emptyOK = defaultEmptyOK;
if (checkField.arguments.length == 4) {
msg = s;
} else {
if( theFunction == isAlphabetic ) msg = pAlphabetic;
if( theFunction == isAlphanumeric ) msg = pAlphanumeric;
if( theFunction == isInteger ) msg = pInteger;
if( theFunction == isNumber ) msg = pNumber;
if( theFunction == isEmail ) msg = pEmail;
if( theFunction == isPhoneNumber ) msg = pPhoneNumber;
if( theFunction == isName ) msg = pName;
}

if ((emptyOK == true) && (isEmpty(theField.value))) return true;

if ((emptyOK == false) && (isEmpty(theField.value)))
return warnEmpty(theField);

if ( checkNiceness && !isNice(theField.value))
return warnInvalid(theField, pNice);

if (theFunction(theField.value) == true)
return true;
else
return warnInvalid(theField,msg);

}

Rafael Muneton

02/7/2009
Muy bueno
Me parece excelente el articulo, es lo que yo andaba buscando.
Ahora lo voy a aplicar dentro de mis scripts de Perl, espero no tener problemas.

Muchas gracias.

yaret

05/9/2009
Necesito una explicacion Del valor en el parametro de la function
bueno se entiende bien y todo como trabaja este scripts pero el paramentro que se le pasa a la funcion (valor) que luego es pasada a parseInt(valor) y a su vez a isNaN (valor)

¿alguien me explicaria como trabaja ese parametro gracias?

Kenet

20/5/2010
Ayuda por favor
Empece a hacer un formulario en PHP y necesito validar mis campos y además quiero que algunos campos sean obligatorios alguien puede ayudarme ??

El Codigo para mi formulario es el siguiente:

<?php
/***************************************************
* PHP 4.1.0+ version of email script. For more
* information on the mail() function for PHP, see
* http://www.php.net/manual/en/function.mail.php
***************************************************/


// First, set up some variables to serve you in
// getting an email. This includes the email this is
// sent to (yours) and what the subject of this email
// should be. It's a good idea to choose your own
// subject instead of allowing the user to. This will
// help prevent spam filters from snatching this email
// out from under your nose when something unusual is put.

$sendTo = "comercial@lostanos.com";
$subject = "MENSAJE DESDE WWW.LOSTANOS.COMZ";

// variables are sent to this PHP page through
// the POST method. $_POST is a global associative array
// of variables passed through this method. From that, we
// can get the values sent to this page from Flash and
// assign them to appropriate variables which can be used
// in the PHP mail() function.


// header information not including sendTo and Subject
// these all go in one variable. First, include From:
$headers = "From: " . $_POST["name"] ." ". $_POST["lastname"] . "<" . $_POST["email"] ."> ";
// next include a replyto
$headers .= "Reply-To: " . $_POST["email"] . " ";
// often email servers won't allow emails to be sent to
// domains other than their own. The return path here will
// often lift that restriction so, for instance, you could send
// email to a hotmail account. (hosting provider settings may vary)
// technically bounced email is supposed to go to the return-path email
$headers .= "Return-path: " . $_POST["email"];

// now we can add the content of the message to a body variable
$message .= "==================================" . " ";
$message .= "MENSAJE DESDE EXPRESSION" . " ";
$message .= "==================================" . " " . " ";
$message .= "Nombre Completo: " . $HTTP_POST_VARS["nombre"] . " " . " ";
$message .= "Empresa: " . $HTTP_POST_VARS["empresa"] . " " . " ";
$message .= "E-Mail: " . $HTTP_POST_VARS["email"] . " " . " ";
$message .= "Telefono: " . $HTTP_POST_VARS["telefono"] . " " . " ";
$message .= "Ciudad: " . $HTTP_POST_VARS["ciudad"] . " " . " ";
$message .= "Mensaje: " . $HTTP_POST_VARS["mensaje"] . " " . " ";


// once the variables have been defined, they can be included
// in the mail function call which will send you an email
mail($sendTo, $subject, $message, $headers);



?>
<script type="text/javascript">

var pagina = 'gracias.html';
var segundos = 0;

function redireccion() {

document.location.href=pagina;

}

setTimeout("redireccion()",segundos);

</script>

O talvez puedan enviarme otro PHP con todo lo que les pido.

Muchas gracias de antemano.

Saludos,

Kenete

jhovanny

04/6/2010
javascript
gracias me servio mucho.

LILY QUINTANILLA FORONDA

25/7/2010
valor numerico
Estoy llenando un formulario para venta de mi casa, todo esta bien menos en el valor de lacasa donde me rechasa y me comenta que vuelva a llenar en valor numerico y no se como porque pongo en numeros yme rechaza, alguien me puede ayudar

misterio

09/9/2010
super
era lo que precisamente lo que necesitaba muchas gracias...

krizia

15/12/2010
no funciona
estoy utilizando java y no me funciona....:(

pushuno

02/5/2011
re: krizia
krizia...

java != javascript
;)

pushuno

02/5/2011
re: LILY QUINTANILLA FORONDA
fijate de no estar poniendo antes el caracter $, lo que hace esta funcion es:

1)parseInt: busca de izquierda a derecha en la variable numeros, si lo primero que ve es una letra o un caracter que NO es numero devuelve NaN, si empieza con numero y tiene un caracter q no es numero despues corta ahi,
ejemplo: si le pasas 3,14 te devuelve 3, si le pasas $3,14 te devuelve NaN por el "$"
2)isNaN:lo unico que hace es q si recibe un NaN devuelve un true, si no devuelve false,
3)la funcion si isNaN devuelve true, retorna un vacio "" si devuelve false retorna el valor del parseInt.

Saludos Pushuno

Daniel_isaac

30/1/2014
Gracias!
Muy bueno este taller le estoy echando los kilos a javascript y a mitad de este año se que mis conocimientos pasaran de básicos a intermedios avanzados :D

David Fuentes

18/4/2014
Solución a lo que dicen algunos usuarios
Mi gente, no se den mala vida colocando tanto código si lo que queremos es verificar si es un valor numérico entero o no. Lo que se debe hacer es colocar que el valor del campo de texto sea igual a una cadena vacía en tal caso de que se consigan valores alfabéticos. Así lo hice yo:

function validarEntero(valor){
valor = parseInt(valor);
if(isNaN(valor)){
//Agregué un alert(); adicional para advertir al usuario.
alert("Debes colocar únicamente números.")
window.document.formulario.texto.value = "";
return "";
}else{
return valor;
}
}

Compartir