Validar Formulario Javascript

Hoy en día, JavaScript es un lenguaje de programación que se utiliza para crear páginas web dinámicas. Sin embargo, este lenguaje de programación también se utiliza para la validación de los formularios mediante la verificación de los datos introducidos por los usuarios antes de ser enviados a un servidor.

Expertos en programación recomiendan validar mediante JavaScript los datos insertados por el usuario en un formulario. De esta forma, si el usuario comete algún error al rellenar dicho formulario, se le podrá notificar de forma instantánea, sin la necesidad de esperar la respuesta del servidor.

Por lo tanto, a continuación, te explicaremos todo lo relacionado con la validación de un formulario con Javascript.

Generalidades de los Formularios

La programación de aplicaciones que contienen formularios web siempre ha sido una de las tareas fundamentales de JavaScript. De hecho, una de las principales razones por las que se inventó el lenguaje de programación JavaScript fue la necesidad de validar los datos de los formularios directamente en el navegador del usuario. Entre sus generalidades más destacadas podemos enunciar las siguientes:

  • Extienden las capacidades de las páginas WEB dinámicas.

  • El código de validación está integrado en el HTML.
  • Se basa en una programación orientada a objetos.
  • La validación de los formularios permite la compatibilidad con elementos del HTML.
  • No se declaran los tipos de variables, permitiendo maximizar el tiempo.

Propiedades básicas de Formularios

JavaScript dispone de numerosas propiedades y funciones que facilitan la programación de aplicaciones que manejan formularios. A continuación, nombraremos las principales:

  • Cuando se carga una página web, el navegador crea automáticamente un array llamado “forms”. Este contiene la referencia a todos los formularios de la página.

  • Para acceder al array forms, se utiliza el objeto “document”. Por lo que, document.forms es el array que contiene todos los formularios de la página. Además, como se trata de un array, el acceso a cada formulario se realizará con la misma sintaxis de los arrays.
  • La siguiente instrucción accede al primer formulario de la página: “document.forms[0]”.
  • Además del array de formularios, el navegador crea automáticamente un array llamado elements por cada uno de los formularios de la página. Cada “array elements” contiene la referencia a todos los elementos de ese formulario, como por ejemplo, cuadros de texto y botones. Para ello utiliza la sintaxis de los arrays, mediante la siguiente instrucción que obtiene el primer elemento del primer formulario de la página: “document.forms[0].elements[0]”.

La sintaxis de los arrays no siempre es tan concisa, pero permite manejar diversos tipos de variables a la vez, otorgándole practicidad.

Elementos utilizados en la Validación de Formularios con Javascript

Invariablemente de la forma o del método utilizado para obtener la referencia a un elemento de formulario, cada elemento dispone de diversas propiedades útiles para el desarrollo de las aplicaciones. A continuación te nombraremos las principales.

  • type: Indica el tipo de elemento que se trata. Para los elementos de tipo <input> (text, button, checkbox, etc.) coincide con el valor de su atributo type. Para las listas desplegables normales (elemento <select>) su valor es select-one, lo que permite diferenciarlas de las listas que permiten seleccionar varios elementos a la vez y cuyo tipo es select-multiple. Además, en los elementos de tipo <textarea>, el valor de type es textarea.

  • form: Es una referencia directa al formulario al que pertenece el elemento. Así, para acceder al formulario de un elemento, se puede utilizar document.getElementById(“id_del_elemento”).form
  • name: Obtiene el valor del atributo name de XHTML. Solamente se puede leer su valor, por lo que no se puede modificar.
  • value: Permite leer y modificar el valor del atributo value de XHTML. Para los campos de texto (<input type=”text”> y <textarea>) obtiene el texto que ha escrito el usuario.

Eventos utilizados en la Validación de Formularios con Javascript

Los eventos más utilizados en el manejo de los formularios son los siguientes:

  • onclick: Evento que se produce cuando se pincha con el ratón sobre un elemento. Normalmente se utiliza con cualquiera de los tipos de botones que permite definir XHTML (<input type=”button”>, <input type=”submit”>, <input type=”image”>).
  • onchange: Evento que se produce cuando el usuario cambia el valor de un elemento de texto (<input type=”text”> o <textarea>). También se produce cuando el usuario selecciona una opción en una lista desplegable (<select>). Sin embargo, el evento sólo se produce si después de realizar el cambio, el usuario pasa al siguiente campo del formulario, lo que técnicamente se conoce como que “el otro campo de formulario ha perdido el foco“.

  • onfocus: Evento que se produce cuando el usuario selecciona un elemento del formulario.
  • onblur: Evento complementario de onfocus. Este se produce cuando el usuario ha deseleccionado un elemento por haber seleccionado otro elemento del formulario. Técnicamente, se dice que el elemento anterior “ha perdido el foco“.

Validaciones más habituales de los campos de Formulario

A continuación, te mencionaremos algunas de las validaciones más habituales de los campos de formulario utilizados hoy en día.

Validar un campo de texto obligatorio

Se trata de forzar al usuario a introducir un valor en un cuadro de texto o en los diversos sub conjuntos de forma obligatoria. Esta condición en JavaScript puede ser establecida como:

Para que se complete un campo de texto obligatorio, se comprueba que el valor introducido sea válido, que el número de caracteres introducido sea mayor que cero y que no se hayan introducido sólo espacios en blanco.

La palabra reservada null es un valor especial que se utiliza para indicar “ningún valor“. Si el valor de una variable es null, la variable no contiene ningún valor de tipo objeto, array, numérico, cadena de texto o booleano.

La segunda parte de la condición obliga a que el texto introducido tenga una longitud superior a cero caracteres, esto es, que no sea un texto vacío.

Por último, la tercera parte de la condición (/^\s+$/.test(valor)) obliga a que el valor introducido por el usuario no sólo esté formado por espacios en blanco. Esta comprobación se basa en el uso de “expresiones regulares“, un recurso habitual en cualquier lenguaje de programación pero que por su gran complejidad no se van a estudiar. Sólo será necesario copiar literalmente esta condición, poniendo especial cuidado en no modificar ningún carácter de la expresión.

Validar un campo de texto con valores numéricos

Se trata de obligar al usuario a introducir un valor numérico en un cuadro de texto. La condición JavaScript consiste en:

Si el contenido de la variable valor no es un número válido, no se cumple la condición. La ventaja de utilizar la función interna “isNaN()” es que simplifica las comprobaciones, ya que JavaScript se encarga de tener en cuenta los decimales, signos, entre otros. A continuación se muestran algunos resultados de la función “isNaN()”:

Validar que se ha seleccionado una opción de una lista

Se trata de obligar al usuario a seleccionar un elemento de una lista desplegable. El siguiente código JavaScript permite conseguirlo:

A partir de la propiedad “selectedIndex”, se comprueba si el índice de la opción seleccionada es válido y además es distinto de cero. La primera opción de la lista (- Selecciona un valor –) no es válida, por lo que no se permite el valor 0 para esta propiedad “selectedIndex”.

Validar una dirección de email

Se trata de obligar al usuario a introducir una dirección de email con un formato válido. Por tanto, lo que se comprueba es que la dirección parezca válida, ya que no se comprueba si se trata de una cuenta de correo electrónico real y operativa. Esta condición JavaScript consiste en:

La comprobación se realiza nuevamente mediante las expresiones regulares, ya que las direcciones de correo electrónico válidas pueden ser muy diferentes. Por otra parte, como el estándar que define el formato de las direcciones de correo electrónico es muy complejo, la expresión regular anterior corresponde a una simplificación.

Sin embargo, aunque esta regla valida la mayoría de direcciones de correo electrónico utilizadas por los usuarios, no soporta todos los diferentes formatos válidos de email.

Validar una fecha

Las fechas suelen ser los campos de formulario más complicados de validar por la multitud de formas diferentes en las que se pueden introducir. El siguiente código asume que de alguna forma se ha obtenido la fecha completa introducida por el usuario:

La función “Date(ano, mes, dia)” es una función interna de JavaScript que permite construir fechas a partir del año, el mes y el día de la fecha.

Por lo tanto, la validación consiste en intentar construir una fecha con los datos proporcionados por el usuario. Si los datos del usuario no son correctos, la fecha no se puede construir correctamente y la validación no será correcta.

¿Qué sucede si cambia el diseño de la página y en el código Javascript se cambia el orden de los formularios originales o se añaden nuevos formularios?

El problema es que el primer formulario de la página podría ser otro formulario diferente al que espera la aplicación.

En un entorno tan cambiante como el diseño web, es muy difícil confiar en que el orden de los formularios se mantenga estable en una página web. Por este motivo, siempre debería evitarse el acceso a los formularios de una página mediante el “array document.forms”.

Una forma de evitar estos problemas consisten en acceder a los formularios de una página a través de su nombre (atributo name) o a través de su atributo id. Cabe destacar que, el objeto “document” permite acceder directamente a cualquier formulario mediante su atributo “name”:

Accediendo de esta forma a los formularios de la página, el script funcionará correctamente aunque se reordenen los formularios o se añadan nuevos formularios a la página. Aquí, los elementos de los formularios también se pueden acceder directamente mediante su atributo “name”:

Obviamente, también se puede acceder a sus elementos utilizando las funciones “DOM” de acceso directo a los nodos. El siguiente ejemplo utiliza la habitual función “document.getElementById()” para acceder de forma directa a un formulario y a uno de sus elementos:

Esperamos que toda esta información referente a la validación de un formulario con Javascript te sea de gran ayuda. Además, si te ha gustado este artículo te recomendamos ingresar al siguiente link donde encontrarás información variada de tu posible interés.

Susana Unformulurario

Ey! Susana por aquí, soy del 78, una de las mejores épocas. Me defino como una apasionada de la gastronomía, el cine y la filosofía. Actualmente soy asesora en Unformulario, ya sabes que si  tienes dudas no tienes nada más que contactarnos ¿Hablamos?

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *