Il pulsante "invia", come abbiamo visto, richiama la funzione convalida definita nella _root. Lo script per la convalida dei
campi di input, è un po' laborioso, ma necessario per evitare che si presentino problemi all'apertura del client di posta. Ho
graficamente diviso lo script in sezioni, per poter meglio distinguere i vari passaggi: ogni volta che un controllo viene superato, si passa
al controllo successivo. Se invece è presente un errore, questo viene scritto nel campo out.
Per ragioni di spazio, non ho incluso il contenuto degli array errori e caratteri. Nel primo sono elencati i possibili messaggi di errore, nel secondo, tutti i caratteri considerati invalidi in un indirizzo email.
// prima parte
email = "indirizzo@host.it";
destinatario = "Staff del sito";
soggetto = "Email da sito";
spedisci = "mailto:" + destinatario + "<" + email + ">";
function convalida () {
errori = new Array(contenuto1);
err = 0;
count = 0;
errore = false;
if (nome == "" || nome == undefined) {
errore = true;
err = 0;
}
// seconda parte
if (!errore) {
caratteri = new Array(contenuto2);
for (i=0; i<caratteri.length; i++) {
if (mail.indexOf(caratteri[i])>=0) {
errore = true;
err = 1;
}
}
}
// terza parte
if (!errore) {
for (i=0; i<mail.length; i++) {
if (mail.charAt(i) == "@") {
count++;
}
}
if (count != 1) {
errore = true;
err = 1;
}
}
// quarta parte
if (!errore) {
dividi = mail.split("@");
if (dividi[0].length<1) {
errore = true;
err = 1;
}
if (dividi[1].indexOf(".")<0) {
errore = true;
err = 1;
} else {
dominio = dividi[1].split(".");
if (dominio[0].length<2) {
errore = true;
err = 1;
}
if (dominio[1].length<2) {
errore = true;
err = 1;
}
}
}
// quinta parte
if (!errore) {
if (citta == "" || citta == undefined) {
errore = true;
err = 2;
}
}
// sesta parte
if (!errore) {
if (testo == "" || testo == undefined) {
errore = true;
err = 3;
}
}
// settima parte
if (!errore) {
getURL (spedisci+"?subject="+soggetto+"&body="+"Nome: "+nome+" E-mail:
"+mail+" Città: "+citta+" "+messaggio1+" "+materiale1+" Testo: "+testo);
out = "";
} else {
out = errori[err];
k = err-1;
}
}
Prima parte
Nella prima parte, vengono definite la funzione e alcune variabili che serviranno nei vari controlli:
• email: l'indirizzo email a cui verrà inviato il messaggio
• destinatario: il nome che apparirà nel campo "destinatario" del client di posta
• soggetto: ciò che apparirà nel campo "soggetto" del client
• spedisci: una stringa formata da "mailto:" più il destinatario più l'email. In questo caso: "mailto:Staff del
sito<indirizzo@host.it>"
• convalida: la funzione, che non necessita del passaggio di parametri
• errori: array contenente i possibili messaggi di errore
• err: variabile che indicherà eventualmente il numero identificativo dell'errore
• count: un contatore, all'inizio settato sullo 0 (ogni volta che viene chiamata la funzione, il contatore viene azzerato)
• errore: booleano per stabilire se c'è un errore oppure no
A questo punto, avviene il primo controllo:
if (nome == "" || nome ==
undefined) {
errore = true;
err = 0;
}
Se il campo di testo associato al nome, è vuoto oppure non definito, la variabile errore viene settata su vero, e il messaggio di
errore associato è lo 0 ("Scrivi il nome"). Quindi, bisogna comunque scrivere qualcosa nel campo "nome".
Seconda Parte
if (!errore) {
caratteri = new Array(contenuto2);
for (i=0; i<caratteri.length; i++) {
if (mail.indexOf(caratteri[i])>=0) {
errore = true;
err = 1;
}
}
}
Superato il primo controllo (if(!errore) significa se la variabile errore è ancora falsa), viene definito un array di caratteri che non
possono essere contenuti in un indirizzo email. Quindi, per tutti i caratteri della lunghezza dell'array (for (i=0; viene controllato se uno di questi caratteri è stato scritto nel campo email.
i<caratteri.length; i++))
mail.indexOf("flash");
controlla se nella stringa "mail", è contenuta la parola "flash". Se la parola c'è, viene
restituito l'indice in cui inizia, altrimenti, se non c'è, viene restituito -1
Noi controlliamo se nella stringa "mail" è presente uno dei caratteri: se di questi caratteri viene restituito un indice diverso da
-1, vuol dire che il carattere c'è. Allora la variabile errore viene settata su vero, e il messaggio di errore (err) su 1 ("email
vuota o non corretta")
Terza parte
if (!errore) {
for (i=0; i<mail.length; i++) {
if (mail.charAt(i) == "@") {
count++;
}
}
if (count != 1) {
errore = true;
err = 1;
}
}
Se è stato superato il precedente controllo, (non ci sono caratteri non validi), viene verificata la presenza di una sola chiocciola @.
Partendo dallo 0, e arrivando alla lunghezza della stringa "mail", viene verificato se il carattere corrispondente è uguale a @:
quando questa uguaglianza è verificata, il valore di count viene aumentato di una unità. Quando il controllo è terminato, se count non
uguale a 1 (c'è una chiocciola, ed è anche l'unica), allora vuol dire che ce ne sono di più oppure che non ce n'è neanche una:
in ogni caso, errore diventa vera, e il messaggio di errore è lo stesso del precedente controllo.
Quarta parte
if (!errore) {
dividi = mail.split("@");
if (dividi[0].length<1) {
errore = true;
err = 1;
}
if (dividi[1].indexOf(".")<0) {
errore = true;
err = 1;
} else {
dominio = dividi[1].split(".");
if (dominio[0].length<2) {
errore = true;
err = 1;
}
if (dominio[1].length<2) {
errore = true;
err = 1;
}
}
}
Il controllo più lungo: se non ci sono errori (nessun carattere invalido, presenza di una sola chiocciola), a dividi vengono assegnati
i valori della divisione in due della stringa "mail" nel carattere "@".
Ad esempio, se "mail" è uguale a "indirizzo@provider", con dividi =
mail.split("@");
otterremo:
dividi[0] = "indirizzo"
dividi[1] = "provider"
Una volta diviso il contenuto di "mail", se la lunghezza della prima parte (dividi[0]) è inferiore a 1 (non c'è niente prima
della chiocciola), abbiamo un errore, e il messaggio è 1.
Quindi, viene verificato se nella seconda parte, è presente un punto. Se non è presente, c'è errore.
Se c'è il punto, la stringa viene divisa in due nel punto. Ricominciando da capo, quindi: se il contenuto di "mail" è
"indirizzo@provider.it", allora
dividi[0] = "indirizzo"
dividi[1] = "provider.it"
Viene preso dividi[1], e diviso sul punto, ottenendo:
dominio[0] = "provider"
dominio[1] = "it"
Se la prima parte ha una lunghezza inferiore a due caratteri, c'è errore, e così per la seconda parte.
Quinta parte
if (!errore) {
if (citta == "" || citta == undefined) {
errore = true;
err = 2;
}
}
Se non ci sono errori, viene verificato che nel campo "citta" (la città di provenienza), sia stato scritto qualcosa. Quindi, se
"citta" è vuota o indefinita, c'è errore, e il messaggio in uscita sarà "Scrivi la tua città di provenienza".
Sesta parte
if (!errore) {
if (testo == "" || testo == undefined) {
errore = true;
err = 3;
}
Come nel precedente, solo che viene verificato se è stato scritto qualcosa nel campo "testo". Il messaggio di errore, nel caso, è :
"Scrivi il messaggio".
Settima parte
if (!errore) {
getURL (spedisci+"?subject="+soggetto+"&body="+"Nome: "+nome+" E-mail:
"+mail+" Città: "+citta+" "+messaggio1+" "+materiale1+" Testo: "+testo);
out = "";
} else {
out = errori[err];
k = err-1;
}
}
Terminati i controlli, se non c'è alcun errore, i dati vengono inviati al client di posta: l'argomento del getURL, è un espressione
somma di tutti i dati che vengono raccolti, e ordinati in una unica stringa. Per capire cosa significa, valutiamo un semplice caso, supponendo
di avere questa situazione:
nome = "Pippo"
mail = "pippo@topolinia.wd"
citta = "topolinia"
testo = "complimenti!"
e ticcato solo il primo dei checkbox. L'argomento del getURL sarà:
mailto:Staff del sito<indirizzo@host.it>?subject=Email da sito&body=Nome: pippo Email: pippo@topolinia.wd Città: topolinia
Messaggio di conferma: sì Invio del materiale: no Testo: complimenti!
Se invece c'è un errore, viene visualizzato, nel campo di testo dinamico out, il messaggio corrispondente all'errore, sulla
base dell'array definito all'inizio.
Il TAB
Quando nel browser si ha un form in html, premendo il tasto TAB ci si sposta da un campo all'altro. La stessa cosa succede in Flash, solo
che ci sono due problemi: innanzitutto, il focus del documento deve essere sul filmato. Poi, il player segue un proprio ordine, nello
stabilire su quale campo focalizzare: ordine che non sempre rispetta il percorso che vorremmo noi.
How is the tab order for form fields
in the Flash player determined?
Il primo problema è già risolto in partenza, dal momento che per accedere al form dobbiamo ciccare su un pulsante nel filmato: una volta
cliccato sul filmato, questo ha il focus.
Per il secondo problema, invece, dobbiamo creare un percorso tra i campi, e fare in modo che il TAB segua questo percorso: utilizzeremo
quindi il metodo setFocus, che ci permette di spostare il cursore sul campo voluto.
Array
Andiamo alla timeline principale, e nel primo frame, assieme alla funzione convalida, scriviamo:
campi = new Array("nome","mail","citta","testo");
k = 0;
Selection.setFocus(campi[k]);
In questo modo abbiamo creato un array contenente le variabili associate ai campi di testo, nell'ordine in cui vogliamo che vengano
selezionati. Inoltre, abbiamo settato la variabile k uguale a 0, e focalizzato il campo a cui è associata la variabile indicata nella
posizione 0 dell'array campi.
Il pulsante nascosto
Nel layer "pulsanti", fuori dall'area visibile dello stage, creiamo un pulsante, il più leggero possibile e senza effetti:
infatti rimarrà nascosto, e servirà solo come appoggio per lo script. Gli associamo:
on (keyPress "<Enter>") {
convalida();
}
on (keyPress "<Tab>") {
if (Key.isDown(Key.TAB) &&
!Key.isDown(Key.SHIFT)) {
if (k == campi.length-1) {
k = 0;
} else {
k++;
}
}
if (Key.isDown(Key.TAB) &&
Key.isDown(Key.SHIFT)) {
if (k == 0) {
k = campi.length-1;
} else {
k--;
}
}
Selection.setFocus(campi[k]);
}
Le prime tre righe servono semplicemente a richiamare la funzione convalida quando viene premuto il tasto Invio. Le altre invece
servono per il controllo del TAB.
Innanzitutto stabiliamo se stiamo premendo il tasto TAB e basta, o anche lo SHIFT: questo ci serve per decidere in quale direzione scorrere i
campi.
Nel primo caso, valutiamo se k è uguale al valore della lunghezza dell'array campi meno 1 (e quindi se il
focus è sul campo
"testo"), nel qual caso diamo a k il valore di 0. Se così non è, aumentiamo il valore di k di una unità.
Nel caso vengano premuti TAB e SHIFT assieme, se k è uguale a 0 (siamo sul primo campo), assegniamo a k il valore della
lunghezza dell'array campi meno 1, altrimenti ne diminuiamo il valore di una unità.
A questo punto, semplicemente settiamo il focus sul campo di testo corrispondente alla posizione k dell'array campi.
Vantaggi e svantaggi
I vantaggi di questo tipo di form mail sono presto detti:
• non c'è bisogno che lo spazio web supporti qualche linguaggio particolare
• è molto facile da configurare
Gli svantaggi:
• non si può mandare a capo nell'inserimento dei dati nel client, se non in locale
• scrivendo nel corpo del messaggio, gli a capo non vengono mantenuti
• se manca un client di posta (tutti i punti internet pubblici), il form non serve a nulla
