In questo screencast vedremo come validare una form con AJAX e jQuery. Nello specifico, vedremo come controllare che i campi della suddetta form siano stati compilati prima di inviare i dati al server, quindi come catturare la risposta del server e aggiungerla nella pagina della form tramite AJAX.

Prerequisiti:

Guarda lo screencast e scarica il sorgente utilizzato nel video.

[update] Grazie alla segnalazione di Enric mi sono accorto che è meglio eliminare tutti gli spazi vuoti dalla stringa prima di controllarne il valore. Per fare ciò basta sostutuire gli assegnamenti delle tre varibili:

//Recupero dei valori dei 3 campi obbligatori
	var name = $("#name").val();
	var mail = $("#mail").val();
	var msg  = $("#message").val();

con 

	var name = $.trim($("#name").val());
	var mail = $.trim($("#mail").val());
	var msg  = $.trim($("#message").val());

dove la funzione trim elimina tutti i caratteri vuoti, come gli spazi. [/update]

Grazie all’ausilio di Camtasia Studio 3 sono riuscito ad aumentare considerevolmente la qualità del video e — visto che mi ci trovavo — ho tenuto un tono di voce sostenuto e più chiaro rispetto allo screencast precedente.

In conclusione devo fare una nota doverosa: la validazione di una form lato client (con JS, jQuery) non dovrebbe comunque sostituire una validazione dei dati lato server. Questo principalmente per due motivi:

  1. i dati che arrivano al server potrebbero esser corrotti, soprattutto nel caso in cui server e client sono due macchine distinte (ad esempio, due diversi siti);
  2. nel caso in cui l’utente abbia i javascript disattivati la validazione non avviene.

Il codice sorgente utlizzato in questo screencast è in parte ispirato al codice del tutorial jQuery: Input Validation with Form Plugin, almeno per quanto riguarda la leggibilità del codice stesso.