Abbiamo già brevemente affrontato il problema di convalidare i campi di un form usando il JS quando abbiamo parlato di form in html.
Convalidare un form significa verificare che il contenuto dei campi sia valido, prima dell'invio del form stesso. I campi presenti in un form possono contenere valori numerici (p.es. l'età di una persona) oppure stringhe (es. il codice fiscale o l'indirizzo).
I campi che di solito è necessario convalidare sono le caselle di testo. Infatti gli altri campi (check box, radio button e caselle di riepilogo) possiedono già dei valori predefiniti dal programmatore, che si suppongono pertanto validi.
La più semplice verifica che può essere fatta su una casella di testo riguarda il fatto che sia stata riempita oppure no. A tale scopo possiamo scrivere una semplice funzione, valida in generale per qualsiasi casella di testo:
{
if (box.value.length < 1)
{
alert ("Errore! La casella di testo è vuota!");
return false;
}
return true;
}
La funzione torna il valore boolean false se la casella è vuota, mentre torna true se la casella contiene dei dati. Si noti l'istruzione return, che interrompe l'esecuzione della funzione e torna un valore al chiamante; box (parametro della funzione) è il nome della casella di testo da convalidare.
Se la casella di testo deve contenere valori numerici, è possibile verificare se tali valori sono compresi fra un massimo e un minimo usando la seguente funzione:
{
var valore, minimo, massimo;
valore = parseFloat(box.value);
minimo = parseFloat(min);
massimo = parseFloat(max);
if (valore>massimo || valore<minimo || box.value!=valore)
{
alert("Errore! La casella di testo non contiene un valore numerico valido!");
return false;
}
return true;
}
Si osservi il confronto box.value!=valore mediante il quale si verifica se la casella di testo contiene un valore numerico (si controlla se il suo contenuto è uguale al suo contenuto convertito in valore numerico: l'uguaglianza è possibile solo se il contenuto era già numerico in partenza).
L'operatore || è l'OR logico (fornisce un risultato true se almeno una delle condizioni è true) e serve per concatenare fra loro più condizioni logiche in un if o in un ciclo.
Volendo verificare se il contenuto numerico è di tipo intero, si può fare così:
if (box.value != valintero)
{
...
}
Per verificare se una casella di testo contiene un indirizzo mail valido, la funzione è la seguente:
{
var apos, dotpos, lastpos;
apos = box.value.indexOf("@");
dotpos = box.value.lastIndexOf(".");
lastpos = box.value.lenght-1;
if (apos<1 || dotpos-apos<2 || lastpos-dotpos>3)
{
alert("Errore! La casella di testo non contiene un indirizzo mail valido!");
return false;
}
return true;
}
La variabile apos contiene la posizione del carattere @ all'interno della stringa; dotpos contiene l'ultima posizione del carattere punto (.); lastpos contiene la posizione dell'ultimo carattere nella stringa. La mail è valida se c'è un carattere @ e non in prima posizione, se ci sono almeno due caratteri fra il punto e il carattere @, se ci sono almeno tre caratteri dopo l'ultimo punto.
Per esempio la seguente stringa contiene un indirizzo mail correttamente formato:
La convalida del form avviene chiamando le funzioni di convalida quando l'utente preme sul bottone submit del form stesso (bottone che provoca l'invio dei dati contenuti nel form). L'evento è associato al gestore di evento onsubmit applicato al tag form. Si consideri come semplice esempio il seguente form in cui bisogna inserire il proprio cognome, l'età e l'indirizzo mail:
Il codice associato è il seguente:
onsubmit = "return riempita(document.getElementById('cognome'))
&& mail(document.getElementById('indirizzo'))
&& numero(document.getElementById('anni'),1,99)"
enctype="text/plain">
Inserisci il tuo cognome:
<input type="text" id="cognome">
<br>
Inserisci la tua età:
<input type="text" id="anni">
<br>
Inserisci il tuo indirizzo mail:
<input type="text" id="indirizzo">
<br />
<input type="submit" name="Submit" value="Invia">
</form>
Solo se tutte e tre le funzioni (mail, numero e riempita) tornano il valore true, il form viene inviato all'indirizzo webmaster@sito.com. Si osservi l'operatore logico and (&&) usato per concatenare la chiamata alle tre funzioni di verifica: basta che una sola delle tre funzioni torni il valore false e automaticamente l'invio viene abortito.
precedente
Sito realizzato in base al template offerto da
http://www.graphixmania.it
