Validar formularios con jQuery – Parte 2

Validar formularios con jQuery – Parte 2

Este tutorial es una continuación de Validar formularios con jQuery – Parte 1.

En el anterior tutorial aprendimos a validar cada campo por separado. Ahora vamos a ver como unir todas las validaciones creando, además, campos obligatorios. Estos campos obligatorios tienen que tener siempre contenido, y por supuesto, que este sea válido. Para hacer más completo nuestro sistema de validación, también vamos a mostrar un mensaje con los errores cuando los haya.

Partiendo de una página index.html en la que tendremos un formulario, vamos a asociar un archivo JavaScript reutilizando todas las funciones que creamos en el tutorial de Validar formularios con jQuery – Parte 1. Además del archivo de la librería jQuery y un fichero de estilos css.

El árbol de directorios y ficheros de nuestro proyecto va a ser el siguiente:

Copy to Clipboard

El archivo index.html que va a contener nuestro formulario y los enlaces a los demás ficheros va a ser el siguiente:

Copy to Clipboard

Echando un vistazo rápido al código, podemos observar un formulario con etiquetas, campos y botones. Además también tenemos textos informativos para indicar que existen campos obligatorios y otro para mostrar los errores en caso de existan. Si hacemos hincapié en los input, podemos ver que algunos tienen la clase “obligatorio” a parte del id. Esto nos va a facilitar nuestra labor de validación al poder seleccionar todos los elementos de una clase de una vez.

Ahora vamos a ver como es el fichero index.css. Este fichero va a contener un par de estilos para colocar las etiquetas y poner los errores de color rojo.

El fichero index.css va a ser el siguiente:

¿Necesitas una impresora?

En este enlace encontrarás una selección de las mejores impresoras actuales

Ir a MejoresImpresoras.com

Copy to Clipboard

Continuamos ahora con el archivo index.js. Este fichero va a contener todo nuestro sistema de validación. Las funciones validación van a ser ejecutadas en cuanto hagamos click en el botón del formulario. Para identificar este botón, podemos hacerlo mediante su id validar_formulario. El evento click va a ser añadido a la página en cuanto esta esté lista, es decir, en el evento .ready() de jQuery. En el siguiente código podemos ver como lo aplicamos:

Copy to Clipboard

Una vez añadido el evento al botón, solamente nos queda crear la función validarFormulario(). Esta función va a hacer uso de las otras funciones que creamos en el tutorial anterior (Validar formularios con jQuery – Parte 2).

Las funciones que reutilizaremos para validar el formulario son las siguientes:

Recordemos que estas funciones devuelven true o false en función de si el campo es válido o no es válido.

Además de estas funciones, vamos a tener que crear una nueva para validar los campos que son obligatorios, los cuales tienen que tener contenido siempre. En el fichero index.js añadimos la función validarCampoObligatorio() que tendrá la siguiente estructura:

Copy to Clipboard

La función validarCampoObligatorio() también va a devolver true o false en función de si el campo que le pasamos como parámetro tiene contenido o no. En la primera comprobación estamos evaluando que la longitud de la cadena sea igual a 0, y en el caso de que así sea, marcarlo como que no está completado. En la segunda comprobación, lo que hacemos es comprobar que no son únicamente espacios, para ello dividimos la cadena en tantas partes como espacios haya y luego las unimos. Si la longitud de la cadena resultante de esta unión es igual a 0, entonces es que solamente eran espacios y no pasa la validación como campo completado.

Una vez tenemos listas todas la funciones que vamos necesitar, ya podemos crear la función validarFormulario() que lanzaremos al pulsar el botón correspondiente. En esta función primero validaremos que los campos obligatorios tengan contenido, después el formato de estos y por último el formato de los campos no obligatorios. En el caso de que haya errores, los iremos almacenando en un la variable de tipo string str_errores. Si no hay errores, esta variable estará completamente vacía, lo que nos servirá para saber si nuestro formulario es válido o no.

El código de la función validarFormulario() es el siguiente:

Copy to Clipboard

Finalmente, ya tenemos preparada nuestra validación del formulario con JavaScript y jQuery.

Como en todos los tutoriales, a continuación podrás encontrar un enlace con una demostración y la descarga del proyecto con el código fuente completo.

4.8 (95.91%) 44 votes

2020-10-09T09:26:43+00:00