Vanadium: Validar formularios fácilmente

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.

vanadium

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 Vanadium en 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.

Posts Relacionados

Comentarios Total 13 comentarios



[...] Vía unijimpe [...]

Jorge
Publicado: 21/09/2009 1:41 pm

hola unijimpe, te la sacaste por la ventana con este aporte.

Me encantó el ejemplo. muchas gracias, de este modo le daré mas estilo a mi formulario. muchas gracias de nuevo.

Bye


[...] Como utilizar ‘Vanadium’, un javascript para validar formularios. – Vanadium: Validar formularios fácilmente [...]

loli
Publicado: 21/09/2009 3:47 pm

Hola, muy bueno y muy bien explicado… pero cómo se podrían traducir los mensajes de validación que aparecen? en vandium.js no están. están en jquery?

unijimpe
Publicado: 21/09/2009 10:32 pm

Para modificar los mensajes de esta librería debes descargar la librería sin comprimir el cual esta en: http://github.com/lambder/Vanadium/raw/master/dist/vanadium.js.

Luego a partir de las linea 991 se encuentran los mensajes que se muestran en las validaciones, por ejemplo:


Vanadium.addValidatorTypes([
['equal', function(v, p) {
return v == p;
}, function (_v, p) {
return 'The value should be equal to ' + p + '.'
}],

loli
Publicado: 22/09/2009 2:43 pm

Bueno, lo he traducido parcialmente, por si alguien quiere seguir…

http://www.gigasize.com/get.php?d=fnooxjckgwc

Gracias unijimpe. pero la duda es… ahora se usa esta librería en el src del script?

Validar formularios fácilmente con jQuery
Publicado: 23/09/2009 2:59 pm

[...] pequeña lista de ejemplos en VanadiumJS puedes ver muchos otros, también puedes leer el artículo Vanadium: Validar formularios fácilmente Etiquetas:Formulario, Formularios, JavaScript, Javascripts, jQuery Descargar en PDFClic [...]

Darwin
Publicado: 25/09/2009 12:04 pm

Hola amigos,alguien me puede ayudar?Perdonad mi franqueza pero yo soy nuevo en esto,y tengo únicamente el conocimiento básico,pero que muy básico (hasta hace 2 años nunca había tocado un ordenador en mi vida,ni siquiera para encenderlo),pues nunca le presté atención,por ignorancia.Y ahora a mis 30 años me ha captado mi atención y parezco un niño que nada sabe del tema pero lo quiere aprender todo…La cuestión es que hace un par de semanas creé mi primer Blog, http://darwinaprendiendounpoco.spaces.live.com/ para poner ahí mis vídeos de ensayo (porque también intento a aprender eso)de youtube y ya he conseguido poner unos cuantos,pero yo quiero presentarlos con otro reproductor,como por ejemplo “Windows Media Player”,pero con éste sólo he conseguido editar un vídeo,y en pantalla pequeña,no modificable.El resto de vídeos se visualizan con el reproductor predefinido de youtube y tampoco los puedo ver en pantalla completa.(Quizás porque copié el código de mis vídeos personalizados en you tube,para tener el marco del reproductor de diferentes colores”..no lo sé…pero yo quiero tener la opción de poder editar esos vídeos con otra configuración de tamaño,para poder verlos en pantalla “mini”(o mediano o grande)y tener la posibilidad de verlos también en pantalla completa,pero no lo consigo.Ahora intento hacerlo con “tubeplayer”,he seguido todos los pasos,y le asigné un host al archivo tubeplayer.swf ,y luego lo subí aquí: https://cid-994d4fa74c3a92a6.skydrive.live.com/browse.aspx/.SharedFavorites
También me he descargado el archivo “vanadium”,pero no sé cómo puedo ediralo y que funcione correctamente.Lo he hecho siguiendo toda ayuda que he podido encontrar por internet pero no lo consigo.Aquí os la muestro:

Y al editarlo en mi blog parece que sólo se ha memorizado la ruta del vídeo que puse en la edición,(con el reproductor predeterminado,claro está)..
Así que al entrar a mi blog se vé el vídeo con el código prácticamente superpuesto..,en fín,un estropicio para la vista…si entráis en mi blog lo veréis,pero ya os dije que esto he nuevo para mí… ^.^
Confío en la sabiduría de todos los entendidos en el tema para que me ayuden a corregir lo que está mal escrito en éste código para poder configurar correctamente el reproductor.
Muchas gracias por todo vuestro tiempo,espero una respuesta.
Darwin.

Darwin
Publicado: 25/09/2009 12:08 pm

Lo siento pero no me permite introducir el código para poder enseñaroslo :(
Como me podéis ayudar entonces??

Francisco
Publicado: 12/10/2009 11:48 am

JQuery se apodera del mercado.

open-pitu
Publicado: 14/10/2009 12:08 pm

Muchas gracias por este post, me ha gustado como lo has presentado, explicando las clases y su modo de uso, realemente muy interesante y útil. Así pues, me he decidido en “traducirlo” al catalán. Supongo que no es ningún inconveniente. De nuevo felicidades!!

Marc
Publicado: 04/11/2009 6:01 am

Pues no entiendo por que.. pero consigo hacer que funcione perfectamente toda la validación, pero con un caso muy extraño y es que no finaliza el submit…

cuando le doy al submit, procesa las validaciones pertinentes, pero no salta a la página indicada en el action…

A alguien mas le ha pasado?

Alfonso
Publicado: 05/11/2009 5:55 pm

a mi me paso lo mismo que a marc alguien tiene la solucion de por que no hace el enlace despues de poner submit

 

Comentar

En este blog los comentarios están moderados, no aparecerán inmediatamente en la página al ser enviados. Por favor, evita los comentarios ofensivos u obscenos por que no serán aprobados.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)