Validare i dati inseriti dagli utenti con jQuery e PHP
Pagina 1 di 4
Validare i nostri form lato client è diventato facilissimo grazie a jQuery, ma poi per essere davvero sicuri che gli input dell'utente siano stati forniti come ce li aspettavamo è buona norma duplicare i controlli anche lato server.
Ma se utilizziamo AJAX per la comunicazione con il server (e quindi con PHP ad esempio) possiamo decidere di delegare tutti i controlli direttamente al server stesso.
Preparazione dell'occorrente
Per il nostro esempio abbiamo bisogno ovviamente di jQuery, PHP e del fedele jQuery Ui
Al momento in cui scriviamo il pacchetto di jQuery Ui contiene la versione 1.8.10 dello script e la 1.4.4 di jQuery, quindi non cediamo alla tentazione di utilizzare il nuovo jQuery 1.5 che vi ho descritto qui ed "accontentiamoci" del bundle proposto.
Scegliamo un tema neutro dal theme roller di Ui:
Passiamo poi al download di ciò che ci serve:
Nel pacchetto scaricato troviamo i ".js" utili jquery-1.4.4.min.js e jquery-ui-1.8.10.custom.min.js all'interno della cartella js, i css dentro l'omonima cartella e possiamo liberarci della cartella development-bundle e del file di esempio index.html
Strutturiamo il tutto in una alberatura coerente ed ecco il risultato così come ce lo mostra Eclipse:
Come potete vedere dall'immagine abbiamo aggiunto un file index.html nella root, un index.js sotto js e uno style.css sotto css, inoltre abbiamo creato una cartella "php" con all'interno un file: remote.php che si occuperà delle validazioni lato server.
Lo scenario
Immaginiamo in questo articolo di creare un semplice form per l'aquisizione di dati dell'utente al fine di salvarli in un ipotetico database di contatti.
Ci concentreremo sulla validazione dei campi immessi dall'utente e non sull'effettivo salvataggio dei dati, che esula dai nostri scopi, per farlo basterà poi inserire nella corretta posizione una chiamata al database per l'inserimento delle informazioni acquisite. Faremo uso del componente dialog di jQuery Ui per mostrare gli alert all'utente, in modo da avere anche visivamente qualcosa di più piacevole e moderno dei classici alert forniti dal browser.
