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.

Popularity: 17% [?]

Potrebbe interessarti anche...

Questo articolo ha 2 commenti/trackback.


  1. Enric
    18 nov 08
    18:51

    Ho visto lo screencast e ho una questione: se uno inserisce uno spazio la stringa non è più riconosciuta come stringa vuota. Esiste un modo di eliminare gli spazi vuoti? In php si usava la funzione trim, ma con jQuery non saprei.


  2. vik
    24 nov 08
    18:06

    Giusto Enric, ho aggiornato l’articolo.

Trackback e pingback

  1. Nessun trackback o pingback disponibile per questo articolo.

Lascia il tuo commento

Segui i commenti di questo articolo abbonandoti al feed RSS specifico. Se vuoi vedere il tuo avatar apparire accanto al tuo commento iscriviti a Gravatar.