mercoledì 19 marzo 2008

AJAX: Validazione di un form

Vediamo un esempio di come utilizzare AJAX e PHP per realizare una funzione di validazione di un modulo (form) per l'inserimento di dati. L'uso di AJAX ci darà la possibilità di presentare all'utente un messaggio di errore non appena il campo contenente un valore non valido viene abbandonato per passare al campo successivo.

In questo modo l'interazione dell'utente con il modulo è molto più diretta e semplice rispetto a quanto avverrebbe se la validazione dei campi avvenisse solo al momento della pressione del pulsante Invia.

Il modulo di esempio è semplicissimo: è uno 'scheletro' di modulo per la registrazione di un utente contenente solo i campi nome utente ed indirizzo email. Tutto qui.

Le regole di validazione sono:

  • Il nome utente non deve essere già presente nel database.
  • L'indirizzo email deve essere valido.
  • Non si può utilizzare lo stesso indirizzo email per più di una registrazione.

Il sorgente è scaricabile dal sito (Form-Ajax). Il contenuto del pacchetto zip è il seguente

db.sql - Script SQL per creare la tabella users usata nell'esempio.

dbconfig.php - Costanti per l'accesso al database: server, nome db, utente e password. Da modificare con i dati relativi al proprio server e database.

user.php - definizione della classe User che incapsula i dati dell'utente ed i metodi per la validazione e il salvataggio degli stessi nel database.

index.php - Contiene il codice HTML per la visualizzazione del form e le istruzioni per processare l'invio dei dati.

main.css Regole di stile applicate al modulo e ai campi.

validate.js - Javascript che crea l'oggetto XMLHttpRequest, invia la richiesta e processa il risultato.

validate.php - Script che riceve le richieste inviate tramite l'oggetto XMLHttpRequest e provvede alla validazione di un campo.

Funzionamento

Scrivo solo qualche nota generale senza commentare tutto il codice.

Come detto all'inizio quello che vogliamo ottenere è una validazione dei dati in tempo reale non appena il focus si sposta da un campo a quello successivo.

Partiamo dall'esame del codice HTML di un campo del modulo (in index.php)

<input id="user_id" name="user_id" type="text"
onblur="validate(this.id, this.value)" ... />

L'evento onblur, che si attiva quando il campo perde il focus, chiama la funzione Javascript validate() (in validate.js) passandole l'attributo ID e il valore del campo.

La funzione svolge questi compiti

1) Crea l'oggetto XMLHttpRequest. Il codice è lo stesso visto nell'articolo AJAX: Liste di Selezione Dinamiche e quindi valgono le considerazioni fatte a suo tempo.

2) Invia una richiesta allo script validate.php con metodo POST in questo modo

var data = "fldid=" + fldId + "&fldval=" +
encodeURIComponent(fldVal);

xmlHttp.open("POST", 'validate.php', true);
xmlHttp.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");

xmlHttp.onreadystatechange = stateChanged;
xmlHttp.send(data);
waiting = true;

waiting è una variabile globale usata come semaforo per impedire di inviare una nuova richiesta quando la precedente è ancora in esecuzione.

La risposta ricevuta dallo script validate.php è gestita dalla funzione stateChanged(). Il formato della risposta è

fldid;messaggio

fldid (anche a intuito) è il valore dell'attributo ID del campo che viene validato, messaggio esiste solo in caso di errore di validazione.

Separate le due componenti della stringa di risposta, si utilizza ID per accedere al tag <span> destinato alla visualizzazione degli errori che si trova sotto ogni tag <input> e vi si inserisce il messaggio. Tutto questo è svolto dal seguente codice

var resp = xmlHttp.responseText;
var p = resp.indexOf(';',0);
if(p > 0) {
 var fld = resp.substr(0,p);
 var msg = resp.substr(p+1);
 var cont = document.getElementById(fld + '_msg');
 if(msg) {
   cont.className= 'error';
 }
 cont.innerHTML = msg;
}

Su validate.php non c'è molto da dire. Crea un oggetto user (istanziando la classe in user.php) e lo inizializza con i dati letti da $_POST (ID e valore del campo da validare). Ricevuto il risultato della validazione, (metodo validate() di user) compone ed invia la stringa di risposta.

Anche per quanto riguarda la classe User (in user.php) lascio da parte ogni dettaglio. Il costruttore della classe riceve come argomento (in un array associativo chiavi / valori) il nome e i valori dei campi da validare (metodo validate()) e salvare nel database (metodo store()).

In caso di errori il relativo messaggio è memorizzato nella proprietà errors accessibile con il metodo getErrors().

Da notare che ci sono errori relativi a singoli campi ed errori in un certo senso globali (ad esempio la impossibilità di connettersi al database): i primi vengono visualizzati sotto al campo i secondi nella parte alta del modulo. Guardatevi setError() nella classe User per capire come questa informazione viene inserita nella proprietà errors.

Per finire diciamo due parole su quanto succede quando si preme Invia. Il controllo passa a index.php che compie di nuovo la validazione di tutti i campi (metodo validate(), oggetto user). Questo passo è necessario perché la validazione AJAX potrebbe essere facilmente scavalcata disabilitando Javascript nel browser.

Se la validazione va a buon fine i dati sono salvati nel database (metodo store(), oggetto user) altrimenti vengono visualizzati gli opportuni messaggi di errore.

<span class="error" id="user_id_msg">
<?php if(isset($errors['user_id'])){echo $errors['user_id'];}?>&nbsp;
</span>

Per installare e provare l'esempio

  • scaricate form-ajax.zip
  • scompattate l'archivio in una cartella del vostro sito web o localmente se usate Xampp, Wamp EasyPHP o simili
  • create un database MySql di prova
  • con PhpMyAdmin o strumento equivalente lanciate lo script db.sql per creare la tabella users
  • modificate dbconfig.php con i valori per accedere al vostro database
  • visitate index.php con il vostro browser
Se qualcosa non è chiaro o trovate qualcosa che non va nel codice lasciate un commento. Alla prossima.

Nessun commento:

Posta un commento

Nota. Solo i membri di questo blog possono postare un commento.