Vanadium: Validar formularios más fácil imposible

Vanadium es un plugin para jQuery que permite validar formularios de manera sencilla y con pocas lineas de código. Permite validar campos obligatorios, numéricos, email, entre otros.

Validar formularios es muy importante en las páginas para prevenir el ingreso de datos inválidos sin el formato adecuado. Obviamente estas validaciones deben estar acompañadas de una validación en el lado del servidor para tener una doble protección. Entonces Vanadium se encarga del proceso de validar formularios de manera sencilla y con una sintaxis muy sencilla de utilizar.

Como utilizar Vanadium
Lo primero es descargar el script desde http://vanadiumjs.com/ en cualquiera de sus versiones:vanadium.js que contiene comentarios que puede usarse para editarlo o vanadium-min.js que esta comprimida para acelerar su carga.

Lo siguiente es incluir jQuery (en mi caso utilizare jQuery desde Google AJAX Libraries API) y Vanadiumen el header de nuestro html para poder hacer uso de sus métodos.

1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
2. <script type="text/javascript" src="vanadium.js"></script>

Lo siguiente es agregar a los campos de nuestro formulario el tipo de validación que queremos aplicarlo, esto se hace agregando estilos a los campos. Algunos de los tipos de validación disponibles son:

• :required el campo es obligatorio.
• :integer se aceptan números enteros.
• :float se aceptan números decimales.
• :length;n el campo debe tener n caracteres.
• :min_length;n se aceptan n caracteres como mínimo.
• :max_length;n se aceptan n caracteres como máximo.
• :accept el campo checkbox debe ser aceptado.
• :email el dato debe ser un email.

Luego si por ejemplo tuviéramos un formulario de registro donde el campo de usuario y clave son obligatorios y además el campo email debe aceptar solamente datos del tipo email tendríamos:

1. <form method="post" action="">
2.    Username:
3.    <input name="username" type="text" id="username" size="36" class=":required" />
4.    Password:
5.    <input name="userpass" type="text" id="userpass" size="36" class=":required" />
6.    Email:
7.    <input name="email" type="text" id="email" size="36" class=":email" />
8.    <input type="submit" name="btsend" id="btsend" value="Registro" />
9. </form>

Listo, ya tenemos nuestro formulario validado. Como pueden ver en el el ejemplo los campos se validan cuando se esta ingresando los datos. Ahora si se desea personalizar esta validación solo hace falta modificar los estilos de los mensajes de error y confirmación.