What is this? From this page you can use the Social Web links to save Volevo farvi un appunto. Anzi, una @Annotazione to a social bookmarking site, or the E-mail form to send a link via e-mail.

Social Web

E-mail

E-mail It
November 28, 2007

Volevo farvi un appunto. Anzi, una @Annotazione

Posted in: Programmazione

Intanto chiedo scusa per la mia assenza, vedrò di farmi perdonare:-)

Proseguendo da dove ero rimasto l'altra volta, ho controllato un po' in giro come le librerie JavaScript più diffuse trattano l'argomento della validazione dei form. Ho visto che l'unica cosa che hanno in comune è che ognuno la fa in modo differente dagli altri...

Ad esempio qui c'è la validazione dei campi di testo secondo Spry.

Volevo però fermarmi ad analizzare come avviene la validazione nella mia libreria preferita, ovvero jQuery. Ecco un esempio di validazione con il jQuery Validation Plugin.

Guardiamo un po' il sorgente: come posso indicare che un valore in un campo è sempre richiesto ed ha lunghezza massima 2?

PLAIN TEXT
HTML:
  1. <input type="text"
  2. class="{required: true, maxLength: 2}">

Argh... va be che anch'io avevo dettto che l'attributo class può essere utilizzato inserire delle annotazioni, ovvero delle informazioni "nascoste" associate ai nodi HTML, da usare poi per la validazione. Ma qui mi sembra che lo strumento venga utilizzato un po' disinvoltamente:-)

(Niente da ridire, in verità, anche io sono uno di quelli a cui piace ogni tanto sfruttare dei trucchetti..)

Però io suggerirei di inserire le annotazioni in un modo un po' diverso. Ovvero in un modo in cui nessun validatore, nessun esaminatore, nessun censore potrà mai avere a che ridire sul modo in cui queste annotazioni siano state inserite.

Ecco qua:

PLAIN TEXT
HTML:
  1. <!-- type: "integer", maxLength: 2
  2. --><input type="text">

Ecco fatto, tutto qua. Come si vede ho inserito le informazioni direttamente all'interno di un commento posto immediatamente prima del nodo a cui si riferiscono. Inoltre in questo modo posso costruire delle annotazioni di arbitraria complessità, su qualunque nodo HTML, e naturalmente non solo per la validazione. Perché semplicemente all'interno del commento è presente un frammento di testo JSON (senza le graffe) e così potrei scrivere, ad esempio:

PLAIN TEXT
HTML:
  1. <!-- id: 1020, type: "integer",
  2.      children: [101, 102, 103],
  3.      coords: {
  4.          x: 100,
  5.          y: 200
  6.      }
  7. --><input type="text" id="text1>

Qui ho specificato un campo "id" contenente un valore intero (magari letto da un database), che a questo campo sono legati in qualche modo degli altri nodi "children" (ad esempio per indicare che se uno solo di questi nodi è compilato devo compilare poi anche questo) e che associato al campo ho delle coordinate che andrò a gestire in un certo modo.

Come faccio poi via JavaScript per utilizzare questi dati "nascosti"? Con una bella funziona apposita:

PLAIN TEXT
JavaScript:
  1. function Annotation(node)
  2. {
  3.     // se è un nodo
  4.     if (node && node.previousSibling)
  5.     {
  6.         // cerco il primo commento precedente
  7.         for
  8.         (
  9.             node = node.previousSibling;
  10.             node && node.nodeType != 8;
  11.             node = node.previousSibling
  12.         )
  13.             ;
  14.         // se ho trovato il commento
  15.         if (node)
  16.         {
  17.             var ann = null;
  18.             try { eval("ann = {" + node.nodeValue + "}"); }
  19.             catch (e) { }
  20.             for (var item in ann)
  21.                 this[item] = ann[item];
  22.         }
  23.     }
  24. }

Che andrò poi ad utilizzare ad esempio così:

PLAIN TEXT
HTML:
  1. <!-- required: true, maxLength: 2
  2. --><input type="text" onclick="clicked(this);">
  3. <script type="text/javascript">
  4. function clicked(node)
  5. {
  6.     var ann = new Annotation(node);
  7.     alert("required = " + ann.required + ", maxLength = " + ann.maxLength);
  8. }
  9. </script>

Return to: Volevo farvi un appunto. Anzi, una @Annotazione