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.

Enter your name:

Enter your e-mail address:

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.


 Spedire l'imput dei form.

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.


 Settare il focus

É 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()">


Index - Part 1 - Part 2 - Part 3 - Part 4 - Part 5 - Part 6

Ultimo aggiornamento: