Los formularios web se han convertido en un elemento común en los sitios web, ya sea como medio de contacto directo con la empresa o en algunos casos incluso más fundamental pues permite al usuario inscribirse a cierto servicio o acceder a una cuenta.
Aparte de tener en cuenta el diseño de tus formularios y mejorar la experiencia de usuario, es importante tener en cuenta la validación de los mismos. Este proceso asegura que los usuarios hayan ingresado los datos en el formato requerido en cada campo específico. Si el usuario ha cometido algún error o no ha llenado un campo mandatorio debería aparecer una notificación indicándole el tipo de error que se ha generado.
Si bien es cierto que puedes empezar este proceso desde cero, existen una gran variedad de plugins jQuery de los que puedes hacer uso para agilizar el proceso.
jqBootstrapValidation
jqBootstrapValidation es un plugin gratuito que hace uso de Bootstrap para el proceso de validación de formularios, desde campos de texto hasta menús desplegables de selección. Es una herramienta adecuada para todos aquellos usuarios que emplean Bootstrap.
Valida
Valida es un plugin ligero que te ofrece una manera sencilla de validar por el lado de cliente.
Parsley.js
Parsley.js puede detectar los cambios que se producen en los elementos HTML y generar respuestas de manera inmediata. Esta librería se ejecuta mediante Ajax y permite a los desarrolladores acceder a diversos esquemas de validación.
Validate.js
Validate.js es una librería para realizar validaciones en jQuery. No depende de ninguna herramienta externa, por lo que también puede usarse sólo con JavaScript. Este plugin te permite crear tus propias reglas de validación e incluso hacer validaciones en cadena, de esta manera afectan a varios campos al mismo tiempo.
Validate.js ha sido diseñada teniendo como base la API de validación de la popular framework Code Igniter.
Fancy Form
Fancy Form es una librería para formularios en jQuery. Con Fancy Form puedes añadir varios campos, asignar etiquetas y validar tus formularios de manera sencilla. Posee también soporte para Ajax.
jQuery Data Entry
jQuery Data Entry es compatible con Ajax y te permite incluir mensajes de error localizados. Puedes implementar la validación del formulario haciendo un uso mínimo de código. Asimismo, puedes establecer las reglas de validación.
Se puede integrar con otras herramientas como Backbone, Knockout y Angular.
FormValidation
FormValidation es un plugin que ha sido diseñado para framework como Bootstrap, Foundation, Semantic, entre otras. A pesar de haber sido desarrollada específicamente para frameworks, también puedes usarlo con cualquier archivo HTML o CSS.
Incluye varias opciones de configuración para cada forma de validación y tipo de formulario.
Guardian
Guardian es un plugin jQuery que ha sido diseñado teniendo como objetivo la flexibilidad y facilidad de extensión, de manera que pueda suplir las necesidades de cualquier desarrollador.
Masked Input
Masked Input permite a los desarrolladores establecer reglas para los formatos de los campos en el formulario mediante el uso de “máscaras”. De esta manera, os desarrolladores pueden crear datos personalizados para direcciones, número telefónicos, etc.
jQuery Validate
jQuery Validate es un plugin sencillo que hace uso de los atributos de datos. Este plugin puede realizar validaciones individuales de acuerdo al atributo en formularios HTML5.
Validetta
Validetta es un plugin ligero que te permite realizar validaciones por el lado de cliente en tus formularios. Es muy sencillo de usar y bastante flexible. Posee una extensa documentación, así como ejemplos de código que puedes copiar y pegar en tus archivos y luego modificarlos para que vayan acorde a las necesidades de tu proyecto.
Validity
Validity es un plugin sencillo de emplear: sólo debes seleccionar el formulario que quieres validar y ejecutar comprobaciones personalizadas como verificar si un campo esta vacío.
jQuery Validation with Ligthbox
Como su nombre indica, jQuery Validation with Ligthbox te permite validar tus formularios e incluir una notificación indicando el éxito de la transacción o un mensaje de error. Ambos mensajes son enviados en un cuadro de estilo Ligthbox.
Validate Helper
Esta librería hace uso de Validate.js al momento de realizar las comprobaciones de formulario. Permite que los desarrolladores creen una validación para formulario personalizada.
Este plugin requiere Bootstrap así que es una gran alternativa para todo aquellos que prefieren trabajar con esta framework en sus proyectos.
Formance.js
Formance.js es una librería que te permite dar formato y validar los campos de tu formulario. Ha sido basada en la librería jQuery.payment.
jQuery Validation Engine
jQuery validation Engine es un plugin que ha sido desarrollado para validar formularios en navegadores web. Este plugin incluye llamativas anotaciones en caso el usuario ingrese datos incorrectos. Estos mensajes de error pueden ser traducidos a cualquier idioma de modo que puedes usarlo sin problemas.
Validatrix
Validatrix es un plugin ligero para validar formularios. Sólo debes incluir el script y añadir la clase “required” en los campos que son obligatorios. Validatrix pesa sólo 2 KB.
jQuery Payment
jQuery Payment es un plugin fue desarrollado por el equipo de Stripe, nuevo sistema de pagos en línea que está compitiendo con el popular PayPal. Como su nombre indica, ha sido diseñado para validar formularios de pago que incluyan un campo para la tarjeta de crédito.
En conclusión…
Validar formularios asegura una buena experiencia de usuario pues de esta manera el usuario puede saber si ha olvidado ingresar algún dato, si ha empleado mayúsculas en un campo donde no está permitido, etc. Este proceso es necesario para que el usuario pueda acceder a la cuenta de alguna plataforma o incluso pueda realizar compras en línea, por lo tanto es muy importante que se realizan todas las pruebas necesarias para asegurar el correcto funcionamiento y validación del formulario.
Esperamos que alguno de estos plugins jQuery para validar formulario te sean de ayuda en tus próximos proyectos.
1 Comment
—— validar y enviar en jq ——
$(document).ready(function(){
$(“#boton-enviar”).click(function(){
var nombre =$(“#nombre”);
var errornombre =$(“#errornombre”);
if(!nombre.val()){
errornombre.fadeIn(“slow”);
nombre.focus();
return false;
}
else{
errornombre.fadeOut();
}
})
})
—— validar y enviar en js ——
function mostrarError(elemento){
elemento.style.display=”inherit”;
}
function sacarError(elemento){
elemento.style.display=”none”;
}
function enviarFormulario(){
var nombre= document.getElementById(“nombre”);
var errornombre= document.getElementById(“errornombre”);
if(!nombre.value || nombre.value.length20){
mostrarError(errornombre);
nombre.focus();
return false;
}
else{
sacarError(errornombre);
}
}
window.onload=function(){
var enviar = document.getElementById(“boton-enviar”);
enviar.onclick=function(){
var valido = enviarFormulario();
if(valido==false){
event.preventDefault();
}
else{
document.form.submit();
}
}
}