viklog

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:

• aver visto il precedente screencast o, comunque, avere delle conoscenze di base di jQuery;
• aver scaricato il plugin jQuery Form.

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.

Popularity: 17% [?]

Potrebbe interessarti anche...

• [i18n] Come realizzare un tema per Wordpress multilingua (2)
• Screencast: primi passi nel favoloso mondo di jQuery (7)
• Web design 2.0: alcune linee guida per un design in perfetto stile web 2.0 (2)
• Di sitemap e Wordpress (6)
• Windows Vista: ripristinare l’ibernazione o la sospenzione ibrida scomparsa (5)