Advertisement
  1. Code
  2. JavaScript

Validación de Formulario Fácil Con jQuery

by
Read Time:11 minsLanguages:

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

En nuestro tutorial anterior, discutimos cómo implementar validación básica de formulario usando algunos atributos de entrada en HTML5 y un poco de regex.

En este tutorial, aprenderás cómo usar un complemento jQuery para agregar validación de formulario a tu sitio web.

Usar un complemento jQuery para validar formularios sirve a muchos propósitos. Te da habilidades adicionales como mostrar fácilmente mensajes personalizados de error y agregar lógica condicional a la validación del formulario. Una librería de validación también te puede ayudar a agregar validación a tus formularios HTML con cambios mínimos o nulos al código. Las condiciones para validez también pueden ser agregadas, removidas o modificadas en cualquier momento con facilidad.

Comenzando

Usaremos el Complemento de Validación jQuery en este tutorial. El complemento ofrece muchas características y también te ayuda a definir tu propia lógica de validación.

Antes de que podamos empezar a usar el complemento en nuestros campos, tenemos que incluir los archivos necesarios en nuestro proyecto. Hay dos diferentes archivos para incluir. El primero es el archivo principal, el cuál incluye las características principales del complemento, incluyendo todo desde diferentes métodos de validación a algunos selectores personalizados. El segundo archivo contiene métodos adicionales para validar entradas como números de tarjetas de crédito y números de teléfono basados en los Estados Unidos.

Puedes agregar esos archivos a tus proyectos mediante administradores de paquetes como Bower o NPM. También puedes solo obtener directamente un enlace de CDN para los archivos y agregarlos a una etiqueta script en tu página web. Ya que este es un complemento basado en jQuery, también necesitarás agregar un enlace a la librería jQuery.

Una vez que has agregado estos archivos, puedes comenzar a validar cualquier formulario mediante el método validate.

Validando Tu Primer Formulario

Puedes comenzar a usar este complemento sin hacer ningún cambio significativo a tu código. La única cosa que podrías tener que cambiar es agregar un id o class al formulario que quieres validar si no tiene ya una.

Aquí está el código de un formulario básico que estaremos validando usando el complemento de validación jQuery.

Estamos usando los mismos atributos que usamos en nuestro tutorial anterior validación de formulario basado en HTML5. El formulario aún hará la validación sin que agreguemos cualquier JavaScript. Sin embargo, usar el complemento para validación nos permitirá mostrar los mensajes de error justo debajo del campo de entrada inválido. También podremos estilizar los errores como queramos.

Para comenzar a validar el formulario con este complemento, simplemente agrega el siguiente código JavaScript en la página web:

Esto es basado en la suposición de que ya agregaste los archivos JavaScript requeridos. Agregar esas líneas de JavaScript asegurará que tu formulario está propiamente validado y muestra todos los mensajes de error. Aquí está una demostración funcionando.

La librería intenta ser tan amigable con el usuario como sea posible mostrando solo mensajes de error cuando sean necesarios. Por ejemplo, si pasas por los campos de nombre y correo electrónico sin realmente ingresar ninguna información, no obtendrás ningún mensaje de error. Sin embargo, si intentas moverte al campo de correo electrónico después de solo ingresar un caracter en el campo de nombre, obtendrás un mensaje de error sobre ingresar al menos tres caracteres.

Los mensajes de error son inyectados al DOM usando el elemento label. Todos ellos tienen una clase error, así que es sencillo aplicar tu propio esilo, como lo hicimos en nuestro ejemplo. Lo mismo es verdadero para campos inválidos, los cuáles también tienen una clase error agregada a ellos.

Opciones para el Método validate()

En nuestro ejemplo anterior, simplemente llamamos el método validate() sin pasarle ninguna opción. Sin embargo, también podemos pasar un objeto a este método junto con varias opciones dentro de ese objeto. El valor de esas opciones determinará cómo el complemento del formulario maneja la validación, errores, etc.

Si quieres que este complemento ignore algunos elementos durante el proceso de validación, puedes hacerlo fácilmente pasando una clase o selector a ignore(). Todos los elementos con ese selector particular serán ignorados por el complemento mientras valide la entrada.

Agrega Reglas de Validación para Campos de Entrada

También puedes pasar algunas reglas al método validate() para determinar cómo son validados los valores de entrada. El valor del parámetro rules debería ser un objeto con un pares llave valor. La llave en cada caso es el nombre del elemento que queremos validar. El valor de esa clave es un objeto el cuál contiene un conjunto de reglas que serán usadas para validación.

También puedes agregar lógica condicional a los diferentes campos que estás validando usando la palabra clave depends y pasando una función de retroceso que regrese ya sea true o false. Aquí está un ejemplo el cuál usa reglas simples para definir cómo se valida la entrada.

En el código de arriba, las llaves name, age, email y weight son simplemente los nombres de los elementos de entrada. Cada llave tiene un objeto como su valor, y los pares llave-valor en el objeto determinan cómo será validado un campo de entrada. Estas opciones de validación son similares a los atributos que puedes agregar en el código de un formulario. Por ejemplo, establecer requiered a verdadero hará que el elemento sea requerido para envío del formulario. Establecer minlength a un valor como 3 forzará al usuario a ingresa al menos 3 caracteres en el campo de texto. Hay algunos otros métodos de valicación integrados los cuales se describen brevemente en la página de documentación.

Una cosa que deberías notar en el código de arriba es el uso de depends para requerir condicionalmente el campo weight si la edad es mayor a 50. Esto se hace devolviendo true en la función de retroceso si el valor ingresado en el campo de entrada age es mayor a 50.

Crea Tus Propios Mensajes de Error

Este complemento también te permite establecer mensajes de error para diferentes reglas de validación en un formulario. Comienzas estableciendo el valor de la llave messages a un objeto con pares llave-valor para los campos de entrada y los mensajs correspondientes de error.

Aquí está un ejemplo el cuál mostrará mensajes personalizados de error para cada campo de entrada.

Igual que rules, messages depende en el nombre de los campos de entrada. Cada uno de esos campos de entrada aceptará un objeto con pares llave-valor como su valor. La llave en cada caso es la regla de validación que tiene que ser seguida. El valor es simplemente el mensaje de error que quieres mostrar si una regla particular es violada.

Por ejemplo, el campo de entrada age disparará el mensaje de error required si se deja en blanco. Sin embargo, disparará el error number si ingresas cualquier cosa que no sea un número en el campo de entrada.

Una cosa que notarás es que el complemento mostrará un error genérico para reglas de validación en donde no hayas suministrado un mensaje personalizado de error. Intenta llenar diferentes valores en el siguiente demo y verás que los errores genérico y personalizado se muestran como es esperado.

Más Opciones para Cambiar el Comportamiento del Complemento

Puedes prevenir que el complemento valide campos de entrada al soltar una tecla, un clic y otros eventos tales estableciendo el valor de onfocusout, onkeyup, o onclick a false. Ten en mente que el booleano true no es valor válido para esas llaves. Esto básicamente significa que si quieres que el complemento valide o pierda foco en un evento de tecla arriba, solo deja esas opciones sin tocar.

También puedes cambiar las clases que son agregadas para elementos de entrada válidos o invalidos usando las llaves errorClass y validClass. Esto puede ayudar en la prevención de algunos choques indeseados debido a reusar el mismo nombre de clase. De manera similar, tienes la opción de cambiar el elemento en el cuál aparece el error. Por defecto, el complemento utiliza el elemento label para mostrar todos los mensajes de error, pero puedes cambiarlos a em o cualquier otro elemento usando la llave errorElement. El elemento de error mismo puede entonces ser envuelto en otro elemento HTML usando la llave wrapper.

Esas son algunas de las opciones más comunes que probablemente uses al validar formularios. Sin embargo, hay algunas otras opciones de validación que podrían resultar útiles si quieres hacer algo como cambiar el posicionamiento de mensajes de error o agruparlos todos.

Ideas Finales

En este tutorial, aprendimos cómo llevar nuestro formulario de validación al siguiente nivel usando un complemento jQuery. Usar validación de formulario JavaScript nos da mucho control adicional contra validación básica HTML. Por ejemplo, puedes controlar fácilmente cómo y cuándo aparecen diferentes mensajes de error cuando una entrada es llenada con valores inválidos. De manera similar, también puedes especificar si el complemento debería saltarse la validación de algunos elementos particulares. Recomiendo enormemente que leas la documentación de este complemento y algunas mejores prácticas sobre cómo usarlo apropiadamente.

En nuestro siguiente tutorial, aprenderás sobre algunas herramientas y complementos más basados en JavaScript para ayudarte a crear y validar formularios fácilmente.

Y mientras estás aquí, ¡revisa algunos de nuestros otros artículos sobre formularios JavaScript y validación de formularios!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.