jQuery - Validar fomularios con Vanadium

Una de las cosas más comunes en el momento de realizar algo web, es la validación de formularios, si esto lo hacemos “a mano”, puede resultar bastante tedioso (dependiendo de lo que queramos hacer), sin embargo, he encontrado algo bastante útil, y que al menos para mis necesidades actuales, me ha funcionado perfecto, se trata de vanadium.

Para utilizar vanadium, debemos descargar JQuery y Vanadium, el cual pueden descargarlo de las siguientes páginas:

http://jquery.com/
http://vanadiumjs.com/

Luego de descargarlos, debemos integrarlos a nuestros proyectos, para ingresarlo a la hoja que tenemos el formulario debemos hacer algo parecido a esto:

<script type="text/javascript" src="Script/jquery-1.7.js"></script>
<script type="text/javascript" src="Script/vanadium.js"></script>

Ya con esto solo debemos agregar las opciones que nos ofrece vanadium, por ejemplo, si queremos que un input sea obligatorio debemos ingresar class=':required', por ejemplo

Usuario: <input type="text" name="user" class=':required' />

Todos los atributos que agregemos serán usadas en el momento de perder el foco o apretar submit. En el caso que queramos ocupar más de una class, por ejemplo que sea obligatorio y solo números debemos agregar simplemente los dos atributos: class=':required :number'

Algunas de las opciones que podemos encontrar son:

:required Campo obligatorio
:int Solo enteros
:float Solo decimales
:number Solo números
:alpha Solo letras
:digits Solo dígitos

En realidad hay más, simplemente si quieren saber más opciones deben leer el archivo vanadium.js y encontrarán todas las opciones que trae, de igual forma, si quieren cambiar el texto por ejemplo a español, deben modificarlo desde el archivo.

Por si quieren que sea con color todo lo que vayan validando, les dejo un código css, lo deben guardar por ejemplo vanadium.css, luego importarlo a la hoja de trabajo y solo hará lo demás. Cabe destacar que el archivo CSS no fue creado por mi, el problema es que no recuerdo de donde fue descargado.

@charset "UTF-8";/* CSS Document */body { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 12px; color: #333;}input { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 12px; color: #666; border: solid 2px #CCC; padding: 4px 4px; margin-right: 6px;}fieldset{    color: #666;}/* Vanadium Styles */ div.vanadium-invalid {  border-color: red !important;  border-style: solid !important;}div.vanadium-valid {  border-color: green !important;  border-style: solid !important;}.vanadium-message-value {  font-style: italic;  text-decoration: underline;}.vanadium-advice.vanadium-invalid, .vanadium-advice.vanadium-invalid * {  color: red;}div {  margin: 10px;  padding: 10px;  border-color: blue;  border-style: solid;}input.vanadium-valid {  border-color: greenyellow;}input.vanadium-invalid {  border-color: red;}#messages {  height: 70px;  padding: 0;  border-color: yellow;}input.vanadium-valid ~ .vanadium-valid-advice {  display: inline !important;  color: green;}

Posted in: javascript, jQuery, Programación, Programación Web