Después de 120 días sin escribir :X, por fin me he dignado a escribir un post que espero que le pueda servir a alguien de ayuda, por lo menos a un eulalio que yo me se XD. Voy a escribir un post sobre como hacer validaciones en tiempo real, es decir, no esperaremos a que el usuario envíe el formulario sino que iremos validando cada uno de los campos según se vaya introduciendo la información. Para ver esto hare una demo apoyándome en la librería jQuery, que no solo nos da la posibilidad de realizar fáciles validaciones al momento sino que además nos permite jugar con una gran variedad de atractivos efectos.

Ejemplo de validaciones con jQuery

Como ya he dicho en la introducción queremos conseguir una validación de formulario en tiempo real, es decir cada vez que un campo del formulario pierda el foco, automáticamente comprobaremos que el campo modificado es correcto, además comprobaremos que todos los campos que preceden a este no se encuentran vacios y que la información es correcta. Con esto mejoraremos la experiencia de usuario ya que avisamos en el mismo momento de cada uno de los errores que está cometiendo al introducir los datos en los campos del formulario y estaremos evitando el tener que realizar varios envíos del form ya que se produjeron fallos en la validación de campos obligatorios.

Dentro de un formulario podemos fijar una serie de campos que sean de tipo obligatorio y sin los cuales el envío del formulario no es posible, pues bien en el ejemplo además de definir campos de tipo obligatorios y mostrar los errores producidos por los mismos, mantendremos informado al usuario con avisos de que la información introducida en un campo no obligatorio no es del todo correcta. En el ejemplo el usuario podrá enviar el formulario en caso de tener avisos pero no en el caso de que el formulario cuente con errores en campos de tipo obligatorio. En todo momento tendremos visible un listado de errores que mostrará al usuario el estado en el que se encuentra cada uno de los campos del formulario.

Este es un ejemplo de referencia y no aplicable a cualquier tipo de formulario ya que según vaya variando el código HTML del formulario habrá que realizar adaptaciones en el código JavaScript, de todas formas podréis ver que gracias a la sencillez de jQuery la adaptación de código según el formulario no es tan complicada. A continuación os muestro como quedaría el formulario con las validaciones:

• Puedes seguir cualquier respuesta a esta entrada mediante la fuente RSS 2.0.
• Puedes dejar un comentario o enviar un trackback desde tu propio sitio.