open-pitu

el blog lliure en català

Vanadium, validació de formularis (AJAX)

Link de referència. Vanadium, validació de formularis


Els formularis són el sistema actual d'entrada de dades per part de l'usuari en un sistema web. És per aquest motiu que sempre s'ha de fer un control sobre les dades que es poden entrar i fer-ne un conjunt de validacions per estalviar problemees a l'administrador de la base de dades. Vanadium és justament un plugin que ensles permet validar en el moment en què l'usuari entra les dades.

Abans de posar-nos a veure el codi, sempre és bo veure les opcions que ens donen. Així doncs els camps de validació disponibles són:
  • Required: Es tracta d'un camp obligatori.
  • Integer: Es tracta d'un camp amb valor enter.
  • Float: Es tracta d'un camp amb valor decimal.
  • Length(n): El camp ha de contenir n caràcters.
  • Min-Length(n): El camp com a mínim ha de contenir n caràcters.
  • Max-Length(n): El camp com a màxim ha de contenir n caràcters
  • Accept: El camp checkbox ha de ser acceptat.
  • Email: El valor del camp ha de ser un email.

Un cop vistes les opcions, vist el potencial, de manera que anem a veure com treure'n el màxim profit. Per començar cal que et descarreguis el plugin aquí. Un cop fet això en el nostre head caldrà caldrà afegir:
  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>

Ara ja podem utilitzar aquest plugin. Tot i haver vist les opcions que ens ofereix, no hem vist encara com s'ha d'utilitzar. Doncs és molt senzill, es tracta de que a cada input que es vulgui utilitzar Vanadium se li ha de donar una de les classes que he anomenat abans. No farem un exemple de cada, si vols veure una demo funcionant fes click aquí.
Així doncs, veurem com fer que una entrada sigui un email i una que sigui obligatòria d'emplenar:
  1. <input name="email" type="text" id="email" size="36" class=":email" />
  2. <input name="username" type="text" id="username" size="36" class=":required" />

Així doncs, com hem vist, podem controlar que s'està entrant el tipus de dades esperat. Es comprova que un email en tingui la forma, s'obliga a contestar els camps obligatoris, es fan les comprovacions per tal de que els camps numèrics tinguin els valors corresponents... Per més informació pots visitar el link del final del how-to a la web oficial del plugin, o podràs realment experimentar tota la potència que té.

Afegir comentari

Nom:
Email (no es publica):
Web:
Comentari:

HOW-TO's relacionats: