En nuestro anterior tutorial, hablamos de cómo implementar una validación básica de formularios utilizando algunos atributos de entrada en HTML5 y un poco de regex.
-
HTML5Validación de entrada de formularios usando sólo HTML5 y RegexMonty Shokeen
En este tutorial, aprenderás a usar un plugin de jQuery para añadir validación de formularios a tu sitio web.
Usar un plugin de jQuery para validar formularios sirve para muchos propósitos. Te da habilidades adicionales como mostrar fácilmente mensajes de error personalizados y añadir lógica condicional a la validación de formularios. Una librería de validación también puede ayudarte a añadir validación a tus formularios HTML con un mínimo o ningún cambio en el marcado. Las condiciones de validez también pueden ser añadidas, eliminadas o modificadas en cualquier momento con facilidad.
Comenzando
En este tutorial utilizaremos el plugin de validación jQuery. El plugin ofrece un montón de características y también te ayuda a definir tu propia lógica de validación.
Antes de que podamos empezar a usar el plugin en nuestros campos, tenemos que incluir los archivos necesarios en nuestro proyecto. Hay dos archivos diferentes a incluir. El primero es el archivo core, que incluye las características principales del plugin, incluyendo desde los diferentes métodos de validación hasta 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 Estados Unidos.
Puedes añadir estos archivos a tus proyectos a través de gestores de paquetes como Bower o NPM. También puedes obtener directamente un enlace CDN a los archivos y añadirlos a una etiqueta script en tu página web. Como se trata de un plugin basado en jQuery, también tendrás que añadir un enlace a la librería jQuery.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
Una vez que hayas añadido estos archivos, puedes empezar a validar cualquier formulario con el método validate.
Validando tu primer formulario
Puedes empezar a usar este plugin sin hacer ningún cambio significativo en tu marcado. Lo único que tendrás que cambiar es añadir un id o class al formulario que quieras validar si no lo tiene ya.
Aquí está el marcado de un formulario básico que vamos a validar usando el plugin jQuery validate.
<form action="" method="post"><p><label for="name">Name <span>(required, at least 3 characters)</span></label><input name="name" minlength="3" type="text" required></p><p><label for="email">E-Mail <span>(required)</span></label><input type="email" name="email" required></p><p><input class="submit" type="submit" value="SUBMIT"></p></form>
Estamos usando los mismos atributos que usamos en nuestro anterior tutorial de validación de formularios basados en HTML5. El formulario seguirá haciendo la validación sin que añadamos ningún JavaScript. Sin embargo, el uso del plugin para la validación nos permitirá mostrar los mensajes de error justo debajo del campo de entrada no válido. También podremos estilizar los errores como queramos.
Para empezar a validar el formulario con este plugin, simplemente añade el siguiente código JavaScript en la página web:
$(document).ready(function() {$("#basic-form").validate();});
Esto se basa en la suposición de que ya has añadido los archivos JavaScript necesarios. Añadiendo esas líneas de JavaScript se asegurará de que su formulario se valida correctamente y muestra todos los mensajes de error. Aquí hay una demostración de trabajo.
La biblioteca trata de ser lo más amigable posible para el usuario mostrando sólo los mensajes de error cuando son necesarios. Por ejemplo, si usted salta a través de los campos de nombre y correo electrónico sin introducir realmente ninguna información, no obtendrá ningún mensaje de error. Sin embargo, si intentas pasar al campo de correo electrónico después de haber introducido sólo un carácter en el campo de nombre, recibirás un mensaje de error sobre la introducción de al menos tres caracteres.
Los mensajes de error se inyectan en el DOM utilizando el elemento label. Todos ellos tienen una clase error, por lo que es fácil aplicar su propio estilo, como hemos hecho en nuestro ejemplo. Lo mismo ocurre con las entradas no válidas, a las que también se les añade una clase error.
Opciones para el método validate()
En nuestro ejemplo anterior, simplemente hemos llamado al método validate() sin pasarle ninguna opción. Sin embargo, también podemos pasar un objeto a este método junto con muchas opciones dentro de ese objeto. El valor de estas opciones determinará cómo el plugin de formulario maneja la validación, los errores, etc.
Si quieres que este plugin ignore algunos elementos durante el proceso de validación, puedes hacerlo fácilmente pasando una clase o selector a ignore(). El plugin ignorará todos los elementos del formulario con ese selector en particular cuando valide la entrada.
Añadir reglas de validación para los campos de entrada
También puedes pasar algunas reglas al método validate() para determinar cómo se validan los valores de entrada. El valor del parámetro rules debe ser un objeto con pares clave-valor. La clave en cada caso es el nombre del elemento que queremos validar. El valor de esa clave es un objeto que contiene un conjunto de reglas que se utilizarán para la validación.
También puedes añadir lógica condicional a los diferentes campos que estés validando utilizando la palabra clave depends y pasándole una función callback que devuelva true o false. Aquí hay un ejemplo que utiliza reglas simples para definir cómo se valida la entrada.
$(document).ready(function() {$("#basic-form").validate({rules: {name : {required: true,minlength: 3},age: {required: true,number: true,min: 18},email: {required: true,email: true},weight: {required: {depends: function(elem) {return $("#age").val() > 50}},number: true,min: 0}}});});
En el fragmento de código anterior, las claves nameageemail y weight son simplemente los nombres de los elementos de entrada. Cada clave tiene un objeto como valor, y los pares clave-valor del objeto determinan cómo se validará un campo de entrada.
Estas opciones de validación son similares a los atributos que puedes añadir en el marcado de un formulario. Por ejemplo, establecer required a true hará que el elemento sea obligatorio para el envío del formulario. Establecer minlength a un valor como 3 obligará a los usuarios a introducir al menos 3 caracteres en la entrada de texto. Hay algunos otros métodos de validación incorporados que se describen brevemente en la página de documentación.
Una cosa que debes notar en el código anterior es el uso de depends para hacer condicionalmente que el peso sea un campo obligatorio si la edad es mayor de 50 años. Esto se hace devolviendo true en la función de callback si el valor introducido en el campo de entrada age es superior a 50.
Crea tus propios mensajes de error
Este plugin también te permite establecer mensajes de error para diferentes reglas de validación en un formulario. Se comienza estableciendo el valor de la clave messages a un objeto con pares clave-valor para los campos de entrada y los correspondientes mensajes de error.
Aquí hay un ejemplo que mostrará mensajes de error personalizados para cada campo de entrada.
messages : {name: {minlength: "Name should be at least 3 characters"},age: {required: "Please enter your age",number: "Please enter your age as a numerical value",min: "You must be at least 18 years old"},email: {email: "The email should be in the format: [email protected]"},weight: {required: "People with age over 50 have to enter their weight",number: "Please enter your weight as a numerical value"}}
Al igual que las reglas, messages dependen del nombre de los campos de entrada. Cada uno de estos campos de entrada aceptará un objeto con pares clave-valor como valor. La clave en cada caso es la regla de validación que hay que seguir. El valor es simplemente el mensaje de error que se quiere mostrar si se infringe una regla concreta.
Por ejemplo, el campo de entrada age activará el mensaje de error required si se deja en blanco. Sin embargo, provocará el error number si introduce cualquier otra cosa además de un número en el campo de entrada.
Una cosa que notará es que el plugin mostrará un mensaje de error genérico para las reglas de validación en las que no haya suministrado un mensaje de error personalizado. Pruebe a rellenar diferentes valores en la siguiente demostración y verá que los mensajes de error personalizados y genéricos se muestran como se esperaba.
Personalización de la apariencia de los mensajes de error
Hay ocasiones en las que puede querer añadir sus propias clases a las entradas válidas e inválidas para orientarlas más específicamente o para una mejor integración con un tema existente.
Puedes cambiar las clases que se añaden a los elementos de entrada válidos o no válidos utilizando las claves errorClass y validClass. Esto puede ayudar a evitar algunos choques no deseados debido a la reutilización del mismo nombre de clase. Por defecto, la clase error se asigna a cada elemento de entrada y etiqueta no válidos. La clase valid se asigna a todos los elementos de entrada válidos.
Es importante recordar que al establecer errorClass a algo como fail-alert se eliminará la clase error de los elementos no válidos. Tendrás que utilizar errorClass: "error fail-alert" para asignar varias clases al mismo elemento. Lo mismo ocurre con validClass.
No se añaden etiquetas adicionales al formulario cuando los usuarios introducen una entrada válida. Así que las clases de validClass se asignan al elemento de entrada válido.
El siguiente fragmento de código se basa en el ejemplo anterior para añadir clases CSS personalizadas y estilos a los elementos no válidos y válidos.
El único código JavaScript adicional se utiliza para asignar las clases.
$(document).ready(function() {$("#basic-form").validate({errorClass: "error fail-alert",validClass: "valid success-alert",// ... More validation code from previous example
Aquí está el CSS que utilizaremos para cambiar la apariencia de los mensajes de error:
label.error.fail-alert {border: 2px solid red;border-radius: 4px;line-height: 1;padding: 2px 0 6px 6px;background: #ffe6eb;}input.valid.success-alert {border: 2px solid #4CAF50;color: green;}
Además de personalizar los mensajes de error, también estamos añadiendo nuestro propio estilo a los elementos de entrada válidos. Aquí tenemos una demo de CodePen para mostrarnos el resultado final.
Más opciones para cambiar el comportamiento del plugin
Puedes evitar que el plugin valide los campos de entrada al pulsar la tecla, hacer clic, y otros eventos similares estableciendo el valor de onfocusoutonkeyup, o onclick a false. Ten en cuenta que el booleano true no es un valor válido para estas claves. Esto significa básicamente que si quieres que el plugin valide o pierda el foco en un evento de subida de clave, simplemente deja estas opciones sin tocar.
También tienes la opción de cambiar el elemento en el que aparece el error. Por defecto, el plugin utiliza el elemento label para mostrar todos los mensajes de error, pero puedes cambiarlo por em o cualquier otro elemento utilizando la tecla errorElement. El propio elemento de error se puede envolver en otro elemento HTML utilizando la clave wrapper.
Estas son algunas de las opciones más comunes que es probable que utilice al validar formularios. Sin embargo, hay algunas otras opciones de validación que pueden ser útiles si quieres hacer algo como cambiar la ubicación de los mensajes de error o agruparlos todos juntos.
Pensamientos finales
En este tutorial, hemos aprendido a llevar nuestra validación de formularios al siguiente nivel utilizando un plugin de jQuery. El uso de la validación de formularios en JavaScript nos da un montón de control adicional sobre la validación HTML básica. Por ejemplo, puedes controlar fácilmente cómo y cuándo aparecen los diferentes mensajes de error cuando una entrada se llena con valores no válidos. Del mismo modo, también se puede especificar si el plugin debe omitir la validación para algunos elementos particulares. Te recomiendo encarecidamente que leas la documentación de este plugin y algunas de las mejores prácticas sobre cómo usarlo correctamente.
En nuestro próximo tutorial, conocerás algunas herramientas y plugins más basados en JavaScript para ayudarte a crear y validar formularios fácilmente.
Y mientras estás aquí, ¡consulta algunos de nuestros otros posts sobre formularios JavaScript y validación de formularios!
-
HTML5Validación de entradas de formularios usando sólo HTML5 y RegexMonty Shokeen
-
Desarrollo webEnviar un formulario sin refrescar la página usando jQueryEric -
PHPCrear un formulario de contacto en PHPMonty Shokeen
