Introduction to JavaScript
Part 7
Introduction to JavaScript
Part 7
Validare l'input.
L'input inserito nei campi delle forms �
solitamente rinviato al server web. JavaScript mette a
disposizione alcuni strumenti per validare l'input prima di
spedirlo al server. Prima di tutto come i campi dei forms possono
essere validati.
Creiamo ora un semplice script in una pagina HTML che contenga due elementi di testo. L'utente deve inserire il nome nel primo campo e l'e-mail nel secondo. Provare prima a riempire i campi e premere il bottone, poi provare a premere il bottono con i campi vuoti.
Se il primo campo no viene riempito viene
aperta dal browser un finestra che contiene un messaggio di
errore.
Il controllo abbinato al secondo campo � leggermente pi�
sofisticato; per inserire un input corretto, occorre che la
stringa digitata contenga il carattere @.(ogni indirizzo internet
contiene il carattere @).
Ecco il sorgente:
<html>
<head>
<script language="JavaScript">
<!-- Hide
function test1(form) {
if (form.text1.value == "")
alert("Please enter a string!")
else {
alert("Hi " +form.text1.value+"! Form input ok!");
}
}
function test2(form) {
if (form.text2.value == "" ||
form.text2.value.indexOf('@', 0) == -1)
alert("No valid e-mail address!");
else alert("OK!");
}
// -->
</script>
</head>
<body>
<form name="first">
Enter your name:<br>
<input type="text" name="text1">
<input type="button" name="button1" value="Test Input" onClick="test1(this.form)">
<P>
Enter your e-mail address:<br>
<input type="text" name="text2">
<input type="button" name="button2" value="Test Input" onClick="test2(this.form)">
</body>
I due bottoni chiamano le functions test1(...)
o test2(...) a seconda del bottone premuto
La function test1(form) testa se la stringa � vuota.
Questo � fatto tramite l'istruzione if (form.text1.value ==
"")... . 'form' � la variabile
che riceve il valore 'this.form' nella chiamata dellla
function. � possibile acqisire il valore dell'imput utilizzando 'value'
combinato con form.text1. Per controllare se la stringa �
vuota si pu� eseguire un controllo su una stringa nulla
("").
Il proplema � che se l'utente inserisce solamente spazi, il
controllo considera l'imput valido, sar� quindi necessario
applicare dei controlli sugli spazi.
La function test2(form) controlla se la stringa inserita
� vuota ("") per essere sicuri che qualcosa � stato
inserito e controlla anche se il carattere '@' �
presente nella stringa.
Che possibilit� ci sono di spedire l'imput dei
form ? Il metodo pi� semplice � quello di spedirlo via e-mail.
Se invece si vuole spedire l'input al server in modo che questo
lo elabori e fornisca delle risposte, occorre utilizzare le CGI.
Se si vuole ad esempio aggiungere testo a pagine HTML esistenti,
non posso utilizzare JavaScript ma sono obbligato ad usare le CGI
.
Questo esempio non utilizza JavaScript, mostra come inviare
l'input dei form mediante e-mail.
<FORM METHOD=POST ACTION="mailto:your_email@goes.here"> <H3>Do you like this page?</H3> <INPUT NAME="choice" TYPE="RADIO" VALUE="1">Not at all.<BR> <INPUT NAME="choice" TYPE="RADIO" VALUE="2" CHECKED>Waste of time.<BR> <INPUT NAME="choice" TYPE="RADIO" VALUE="3">Worst site of the Net.<BR> <INPUT NAME="submit" TYPE="SUBMIT" VALUE="Send"> </FORM>
L'inconveniente � che la mail ricevuta conterrà alcuni caratteri sporchi, ad esempio gli spazi saranno sostituiti da '+'. Esistono programmi che riformattano l'input della mail in formato meglio leggibile.
� possibile stabilire quale elemento della form possiede il focus all'inizio dell'inserimento, oppure comunicare al browser su quale elemento si deve posizionare se l'input � errato. Spostare il focus significa sostanzialmente spostare il cursore da un campo ad un altro.
Ecco come fare
function setfocus() {
document.first.text1.focus();
return;
}
Questo script sposta il focus al primo campo testo. Occore riferirsi al campo del form specificando first - e il nome del singolo elemento - text1. Se si vuole settare il focus al momento di caricamento della form, baster� aggiungere la propiet� onLoad- nel tag <body>. Ad esempio:
<body onLoad="setfocus()">
Ultimo aggiornamento: