Esta práctica te muestra un sencillo ejemplo de validación de un entero con Javascript en un campo de formulario. Podrían haber diversas maneras de conseguirlo, te mostraremos algunas de ellas, de modo que puedas tú hacer tus propias validaciones.

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.

Función de validación de un entero en Javascript ES6

Desde Javascript en su versión ES6 (ECMAScript 2015) tenemos una función llamada Number.isInteger() que permite realizar la validación de un entero. Por tanto, esta función la podrás usar en todos los navegadores menos en Internet Explorer.

let numero = 22;
if(Number.isInteger(numero)) {
  console.log('La variable es entera');
}

Pero ojo: Number.isInteger() no funciona con cadenas, solamente te validará correctamente si lo que tienes en la variable que intentas validar es de tipo "Number". Si intentas validar un campo de formulario, quizás no tengas el resultado esperado, porque lo que está escrito siempre en un campo de formulario es un texto, que no es lo mismo que un número.

Lo que tendrás que hacer en el caso que el dato venga de un formulario, es convertirlo primero en un entero.

Esta función haría el trabajo que deseas. Devuelve true o false dependiendo de si en el campo hay un número entero. Si había algo que pueda entenderse como un entero, se encarga de actualizar el campo de formulario para convertirlo a entero de verdad (por ejemplo si hay '33a' cambiará el valor del campo para que figure '33'. Recibe el identificador del campo que se desea validar.

function validarEnteroEnCampo(identificadorDelCampo) {
  let field = document.getElementById(identificadorDelCampo);
  let valueInt = parseInt(field.value);
  if (!Number.isInteger(valueInt)) {
    return false;
  } else {
    field.value = valueInt;
    return true;
  }
}

Seguro que con un poco de adaptación por tu parte puedes reutilizar esta función en tu propio problema.

Práctica cásica con parseInt() y isNan()

Este ejercicio que vamos a ver a continuación es más completo (porque veremos un formulario entero y su validación) y más clásico (porque usa funciones más tradicionales de Javascript y un acceso al DOM disponible en navegadores muy antiguos). 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
      }
}

Práctica de validación de un entero en un 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 de validació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

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 y nos vemos en otro taller de Javascript.