Una delle caratteristiche più comuni dei moduli di registrazione a siti o servizi online, è la verifica della password scelta e inserita dall'utente. In genere, a quest'ultimo viene richiesta una duplice immissione della password, con il secondo campo che serve a verificare la corrispondenza con il primo. Questo semplice script verifica innanzitutto che l'utente abbia inserito una password nei due campi, quindi la loro corrispondenza. In entrambi i casi l'utente viene avvisato con un alert. Lo script può essere facilmente riutilizzato in più ampie e complesse procedure di validazione dei form.
- esempio.htm
## 1: LA SEZIONE JAVASCRIPT
La sezione Javascript contiene il codice per l'esecuzione della funzione principale, convalidaForm. Si inizia con il verificare che l'utente abbia inserito un valore nel campo password. Se non lo ha fatto, al momento dell'invio dei dati viene avvisato da un alert personalizzabile. Ecco il codice:
function convalidaForm(passwordForm) {
if (passwordForm.password.value == "") {
alert("Devi inserire una password!")
passwordForm.password.focus()
return false
}
Come si vede, il tutto è ottenuto attraverso una semplice istruzione condizionale (if). Nella second riga, passwordForm è il nome assegnato al modulo nel codice HTML; password è invece il nome assegnato al primo campo per l'immissione della password. Modificando i nomi nel codice HTML, si dovranno cambiare di conseguenza anche nello script. Dopo aver osservato che il testo dell'alert può essere facilmente personalizzato, soffermiamoci sull'istruzione 'passwordForm.password.focus()'. Serve a specificare che alla chiusura del box di alert, il focus ritorni sul campo password. In pratica, l'utente vedrà il cursore apparire al suo interno.
Lo script prosegue con la seconda verifica. Se l'utente ha inserito le due password, viene valutata la loro corrispondenza. Ecco il codice:
if (passwordForm.password.value != passwordForm.password2.value) {
alert("La passord inserita non coincide con la prima!")
passwordForm.password.focus()
passwordForm.password.select()
return false
}
Molto semplice la struttura. Con l'operatore != si verifica se il valore inserito nel secondo campo non è uguale a quello del primo campo. In questo caso, scatta l'alert e il focus torna al primo input di tipo password (come si può osservare eseguendo l'esempio allegato).
Riportiamo per comodità tutto il codice dello script:
<script language="javascript" type="text/javascript">
<!--
function convalidaForm(passwordForm) {
if (passwordForm.password.value == "") {
alert("Devi inserire una password!")
passwordForm.password.focus()
return false
}
if (passwordForm.password.value != passwordForm.password2.value) {
alert("La passord inserita non coincide con la prima!")
passwordForm.password.focus()
passwordForm.password.select()
return false
}
return true
}
-->
</script>
## 2: RICHIAMO INTERNO ALLA PAGINA WEB
Il richiamo interno alla pagina Web è un semplicissimo modulo di registrazione.
<form onsubmit="return convalidaForm(this)" action="">
Nome: <input type="text" size="30">
<p>Scegli una password: <input type="password"
name="password"></p>
<p>Verifica password: <input type="password"
name="password2"></p>
<p><input type="submit" value="Invia"> <input
type="reset"></p>
</form>
Due le cose da osservare. Innanzitutto i nomi del form e dei campi che lo compongono che coincidono con quelli già visti nello script. Quindi, l'istruzione che consente l'esecuzione della funzione convalidaForm. Essa avviene al momento dell'invio del modulo grazie all'evento onSubmit collegato al modulo.
