Archivio: 2007 June
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...
Somnio Ergo Sum: sito online
Intanto diteci cosa ne pensate, presto (io o Diego) metteremo online maggiori informazioni su come è nato il progetto, qual'è stato il case study e come ci siamo mossi per la realizzazione.
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...
