Validar un formulario sin tener la necesidad de recargar el documento completo es claramente una practica más que recomendable. Para lograr esto Javascript es la mejor opción, porque sacando algún que otro método es el más simple, y si utilizamos para su implementación jQuery, bueno, no hay mucho más que pensar.
Para jQuery hay varios plugin para la validación de formularios, pero en esta entrada vamos a hablar de Validity que es uno de los más recientes.
Validity es un plugin completamente gratuito, que nos permite validar nuestros formularios de manera muy simple, y tiene un peso de apenas 9 KB, muy buen tamaño para no aumentar los tiempos de descarga.
La instalación forma de utilizar este plugin es la siguiente:
<link type="text/css" rel="Stylesheet" href="jquery.validity.css" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.validity.js"></script> <script type="text/javascript"> $(function() { $("form").validity(function() { }); }); </script>
El plugin se puede configurar a un nivel muy importante, no solo podemos personalizar el mensaje de error, sino el tipo de dato a validar, y todo con apenas unas líneas de código, pueden ver las opciones de personalización directamente de la documentación oficial, no obstante coloco a continuación el ejemplo propuesto:
$("form").validity(function() { $("#vehicles") // The first input: .require() // Required: .match("number") // In the format of a number: .range(4, 12); // Between 4 and 12 (inclusively): $("#dob") // The second input: .require() // Required: .match("date") // In the format of a date: .lessThanOrEqualTo(new Date()); // In the past (less than or equal to today): });
Merece la pena estudiar más a fondo este plugin, creo que puede ahorrarnos mucho tiempo 😀
Web: Validity
Bitacora Economica
13 años ago
Muchas gracias! Sabía que si buscaba en este sitio encontraría lo que buscaba y así es! 😀
Dentista Moctezuma
13 años ago
Saludos. He instalado validity con éxito, sólo debo resolver como mantener las alertas dentro de un div que tengo como contenedor del formulario. Por lo demás, muy sencillo de configurar. Gracias por el aporte.
Web Design Solutions CR
13 años ago
Excelente plugin super util adaptable a cualquier proyecto, me va a servir de maravilla en mis sitios web. Muchas Gracias…