segue da "controllo dei dati inseriti in un form"
Nel controllo dei dati inseriti nelle caselle di testo di un form l'utente riceve un messaggio di errore che potrebbe essere inopportuno, sia perchè costringe l'utente a premere il pulsante ok per continuare, sia perchè, dopo aver premuto ok, il messaggio stesso scompare e l'utente perde la segnalazione di errore
La tecnica che si descrive nel prossimo script consiste nel creare una div nascosta contenente il testo del messaggio di errore. Quando lo script deve segnalare l'errore, anzichè usare il comando alert modifica la proprietà display dell'elemento div.
All'interno del tag td, subito dopo ciascuna casella di testo, inserire l'elemento div con la proprietà di stile display impostata a none, che rende l'elemento nascosto.
La proprietà, però, non viene assegnata all'elemento ma viene inclusa nella definizione di una classe. Nella sezione head della pagina inserire la dichiarazione degli stili:
<style>
.messaggio {
display:none;
position:relative;
top:1px;
left:1px;
background-color:#D3D3D3;
border-style:solid;
border-width:1px;
padding:5px 10px 5px 10px;
}
</style>
Creare un elemento div avente un id univoco nella pagina ed appartenente alla classe messaggio. Inserire questo elemento dopo la casella di input Nome:
<td align=right>Nome:</td>
<td><input type=text name=nome>
<div id="nomeErr" class="messaggio">Inserisci correttamente il tuo nome</div>
</td>
Nella funzione convalidaCampi() sostituire la chiamata alla funzione alert con la chiamata ad una funzione che ha lo scopo di modificare la visibilità dell'elemento div:
<html>
<head>
<title>Registrazione Nuovo Utente</title>
<script>
function convalidaCampi() {
if(document.moduloIns.nome.value == "") {
mostraErrore('nomeErr')
return false
}
return true
}
</script>
</head>
A questo punto resta da scrivere la funzione che riceve come parametro l'ID dell'elemento e ne modifica la proprietà display.
function mostraErrore(ident) {
document.getElementById(ident).style.display='block';
}
function nascondiErrore(ident) {
document.getElementById(ident).style.display='none';
}
Infine, dopo che l'utente ha corretto l'errore bisogna nascondere nuovamente la casella in cui è contenuto il messaggio.
Nella stessa funzione convalidaCampi, subito dopo la parentesi di chiusura dell'istruzione if, quindi quando la casella di testo non è vuota, riportare la casella contenente il messaggio di errore allo stato di nascosto:
function convalidaCampi() {
if(document.moduloIns.nome.value == "") {
mostraErrore('nomeErr')
return false
}
nascondiErrore('nomeErr')
return true
}
Il controllo sugli altri campi del form può essere svolto con lo stesso procedimento. Ad esempio, per controllare che anche il campo Cognome non sia vuoto:
<td align=right>Nome:</td>
<td><input type=text name=nome>
<div id="nomeErr" class="messaggio">Inserisci correttamente il tuo nome</div>
</td>
</tr><tr>
<td align=right>Cognome</td><td><input type=text name=cognome>
<div id="cognomeErr" class="messaggio">Inserisci correttamente il tuo nome</div>
</td>
Nella funzione convalidaCampi() aggiungere il test sulla correttezza della casella di testo "Cognome".
<script>
function convalidaCampi() {
if(document.moduloIns.nome.value == "") {
mostraErrore('nomeErr')
return false
}
nascondiErrore('nomeErr')
if(document.moduloIns.cognome.value == "") {
mostraErrore('cognomeErr')
return false
}
return true
}
</script>
La validità del campo "numero di telefono" può consistere, oltre che nella presenza di almeno un carattere nel campo, anche nel verificare che il numero sia composto da 10 cifre numeriche
La funzione seguente inizia con due test. Il primo test ritorna il valore false se il campo è stato lasciato vuoto, il secondo test ritorna false se il campo non contiene esattamente 10 cifre.
Il terzo test è contenuto in un ciclo for. Si preleva in successione un carattere dalla stringa "Numero di telefono" e si verifica se è un numero semplicemente cercando la sua posizione all'interno dell'array cifre. Questa ricerca è svolta dal metodo indexOf(char) applicato all'array cifre. Se il carattere (char) è presente nell'array la funzione restituisce la sua posizione, altrimenti la funzione restituisce il valore -1.
function convalidaTlf(nrTlf) {
var cifre = "0123456789";
if(nrTlf=="") {
alert("inserisci il Numero di telefono")
return false
}
if(nrTlf.length != 10) {
alert("Numero di telefono sbagliato. Controlla e reinserisci.")
return false
}
for (var i=0; i < nrTlf.length; i++) {
temp = "" + nrTlf.substring(i, i+1)
if (cifre.indexOf(temp) == "-1") {
alert("Ci sono dei caratteri errati nel numero inserito. Correggi.")
return false
}
}
return true
}
La chiamata alla funzione convalidaTlf deve essere inserita nella funzione convalidaCampi() prima dell'istruzione return true:
<script>
function convalidaCampi() {
if(document.moduloIns.nome.value == "") {
mostraErrore('nomeErr')
return false
}
nascondiErrore('nomeErr')
if(document.moduloIns.cognome.value == "") {
mostraErrore('cognomeErr')
return false
}
if (!ConvalidaTlf(document.moduloIns.tlf.value)) return false
return true
}
</script>
Sostituire le funzioni alert con l'elemento div nascosto, come si è fatto nel caso del nome e del cognome.
function convalidaData(natoIl) {
if(natoIl=="") {
alert("inserire la data di nascita")
return false
}
if((natoIl.charAt(2)!= '/')||(natoIl.charAt(5) != '/')) {
alert("il segno di separazione tra gg, mm e aaaa deve essere correttamente posizionato: gg/mm/aaaa")
}
var cifre = "0123456789/"
var nrSlash = 0
if (natoIl.length != 10) {
alert("Inserire la data nella forma: gg/mm/aaaa. Ripeti.")
return false
}
for (var i=0; i < natoIl.length; i++) {
temp = "" + natoIl.substring(i, i+1)
if (temp == "/")
nrSlash++;
if (cifre.indexOf(temp) == "-1") {
alert("caratteri non ammessi nella data di nascita. Ripeti")
return false
}
if (nrSlash > 2) {
alert("Controllare la data, usare il formato gg/mm/aaaa.")
return false
}
}
return true
}
Inserire la chiamata alla funzione di convalida della data di nascita, subito dopo la chiamata della funzione di convalida del numero di telefono.
Sostituire tutte le funzioni alert con l'elemento div nascosto
Inserire correttamente sia la funzione per convalidare l'indirizzo di posta elettronica sia la sua chiamata. Eventualmente apportare ulteriori controlli
function convalidaMail(indirizzoMail) {
if(indirizzoMail=="") {
alert("inserire l'indirizzo di posta")
return false
}
nrAt=0
nrPunti=0
for (i=0; i < indirizzoMail.length; i++) {
if(indirizzoMail.charAt(i)=='@') nrAt++
if(indirizzoMail.charAt(i)=='.') nrPunti++
}
if((nrAt !=1)||(nrPunti == 0)) {
alert("correggi l'indirizzo di posta")
return false
}
return true
}
Nel procedimento proposto, lo script appena trova un errore lo segnala e solo dopo la sua correzione ne segnala un altro. Modificare lo script affinchè fornisca tutti insieme i messaggi relativi a ciascun errore trovato, anzichè richiedere successivamente la correzione di un campo
Aggiungere il test per verificare che le due password inserite siano uguali.
Aggiungere anche un analisi della password che si assicuri che questa soddisfi i requisiti di sicurezza: lunghezza > 8 caratteri, presenza di cifre, presenza di caratteri minuscoli e maiuscoli.