bigliard
Volevo farvi un appunto. Anzi, una @Annotazione
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?
HTML:
-
<input type="text"
-
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:
HTML:
-
<!-- type: "integer", maxLength: 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:
HTML:
-
<!-- id: 1020, type: "integer",
-
children: [101, 102, 103],
-
coords: {
-
x: 100,
-
y: 200
-
}
-
--><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:
JavaScript:
-
function Annotation(node)
-
{
-
// se è un nodo
-
if (node && node.previousSibling)
-
{
-
// cerco il primo commento precedente
-
for
-
(
-
node = node.previousSibling;
-
node && node.nodeType != 8;
-
node = node.previousSibling
-
)
-
;
-
// se ho trovato il commento
-
if (node)
-
{
-
var ann = null;
-
try { eval("ann = {" + node.nodeValue + "}"); }
-
catch (e) { }
-
for (var item in ann)
-
this[item] = ann[item];
-
}
-
}
-
}
Che andrò poi ad utilizzare ad esempio così:
HTML:
Che stile, che classe!
Sto arrovellandomi per trovare, tra le tante soluzioni, quale sia la più elegante per risolvere il problema della validazione dei form.
Il problema è sempre lo stesso. Come indicare che un campo è obbligatorio, oppure deve contenere un numero intero, oppure una textarea deve avere al massimo un certo numero di caratteri?
Be' se fossimo in un mondo perfetto la soluzione ci sarebbe già, e si chiamerebbe HTML 5. Guardate ad esempio cosa hanno pensato bene quelli del WHATWG nella specifica Web Forms 2.0 sull'argomento validazione. Però in un mondo perfetto non siamo...
Ad esempio per specificare un campo obbligatorio cosa c'è di meglio di un attributo "required"? Poi basterebbe l'utilizzo di una semplice funzione JavaScript per controllarne la correttezza, come descritto per esempio nell'articolo JavaScript triggers di Peter-Paul Koch.
E allora il problema qual'è? La soluzione sembra già a portata di mano. Ebbene il problema è il seguente: la specifica HTML attuale, con l'ausilio dei famigerati DTD HTML, non permettono l'introduzione di attributi "alieni" all'interno di un elemento HTML.
Questo si guardi bene potrebbe essere contestato. Che fastidio potrebbe dare un attributo in più se gli attributi necessari fossero già presenti? Semplicemente il browser che non ne capisca il significato potrebbe scartare l'attributo, come già fanno adesso tutti i browser creati fino a questo momento!
Però il problema rimane. Una buona soluzione deve funzionare anche in caso di necessità di validazione HTML. Bisognerebbe trovare una soluzione di classe... che dico di classe, di "class"!
Vediamo come potremmo fare:
HTML:
-
<input type="text" class="required integer">
Vi sembra brutto? Voi mi direte: l'attributo "class" serve ad altro, non è corretto utilizzarlo in questo modo. E invece io dico: cosa vuol dire "appartenere ad una classe"? Non significa che questa classe debba avere soltanto delle implicazioni sul modo in cui l'elemento viene visualizzato. Anzi è consigliato che il nome della classe ne sappresenti il significato e non l'aspetto. Ad esempio classe "errore" e non classe "rosso", perché magari un errore sarà sempre mostrato in rosso ma la classe ne deve indicare il significato e non l'aspetto, che devono rimanere indipendenti.
E qui volevo arrivare! Utilizzare una classe per indicare una caratteristica strutturale dell'elemento non va in conflitto con il fatto di specificare come quell'elemento deve essere visualizzato. Ad esempio io potrei volere che tutti i campi obbligatori abbiamo lo sfondo giallo, mentre tutti i campi interi abbiano un bordo rosso:
CSS:
-
input.required { background-color: yellow; }
-
input.integer { border: solid 1pt red; }
E nello stesso tempo una funzione JavaScript potrebbe controllarne la validazione:
JAVASCRIPT:
-
function validate(node)
-
{
-
try
-
{
-
if (containsClass(node, "required"))
-
checkRequired(node);
-
if (containsClass(node, "integer"))
-
checkInteger(node);
-
alert("ok");
-
}
-
catch (e)
-
{
-
alert(e.message);
-
}
-
}
-
function checkRequired(node)
-
{
-
if (!node.value)
-
throw { message: "valore mancante", target: node };
-
return null;
-
}
-
function checkInteger(node)
-
{
-
if (node.value && isNaN(parseInt(node.value, 10)))
-
throw { message: "non è un intero", target: node };
-
return null;
-
}
-
function containsClass(node, className)
-
{
-
return node.className.indexOf(className)>= 0;
-
}
Si veda bene che questo codice non vuol essere lo script migliore che si possa scrivere per gestire la validazione di un campo, ma solo un esempio su come semplice possa essere l'utilizzo di questo sistema. E le soluzione più semplici (a volte) sono le migliori:-) Questa come vi pare?
Naturalmente questo è solo l'inizio...
Buongiorno, mi presento
Buongiorno a tutti, mi presento. Sono Gaetano Bigliardi ma qui mi farò chiamare semplicemente "bigliard".
Approfitto dello spazio che mi viene offerto per far sentire la mia voce. E non posso far altro che ringraziare Diego che mi ha invitato a scrivere su queste pagine.
Di cosa mi occuperò quindi nei miei "post" del Laboratorio Caffeina? Be' il nome stesso del sito vuole far intendere che una delle bevande più apprezzate dagli sviluppatori sia proprio il caffè, anzi il Java... io però preferisco che non sia troppo concentrato. E lo ingentilirò con un po' di Script. Chi vuole intendere...
