Validar entero en campo de formulario

11/3/02 - 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ía, licencia y acciones sobre este artículo

Informe de Miguel Angel Alvarez* Director de DesarrolloWeb.com URL: http://www.desarrolloweb.com Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo. Versión imprimible del artículo Enviar artículo por e-mail Publicar un comentario del artículo

Añadir un comentario del artículo Los comentarios de los visitantes son para ampliar la información del artículo. Cualquiera puede participar.

Se muestra un comentario revisado

Añadir un comentario del artículo

Comentarios sin revisar

Añadir un comentario del artículo Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente.

Ver los comentarios no revisados

Añadir un comentario del artículo

Enlaces:

Maestrosdelweb

  Ir arriba