Creare un ajax contact form con validazione dei dati

Raspo — Thu, 22 Oct 2009 23:53:45 +0000

Con questo tutorial ti spiegherò come realizzare un form, da usare nella tua pagina contatti, per l’invio di email tramite ajax (quindi senza bisogno di ricaricare la pagina) con tanto di validazione dei dati inseriti.

Caratteristiche

Ogni campo ha dei dati predefiniti che vengono cancellati quando questo ottiene il “focus”
Se l’utente non inserisce dei dati obbligatori o un indirizzo email valido, lo script notifica l’errore evidenziando in rosso i campi errati.
L’email viene inviata tramite ajax e restituisce un messaggio di notifica al termine dell’operazione
L’invio dell’email deve poter funzionare anche con javascript disabilitati.

Per avere un idea più chiara di ciò che andremo a creare, ecco una demo funzionante del “prodotto finito”.

LINK DEMO

Preparazione

Per iniziare avrai bisogno di una pagina html “di base”.



	
		

		

		
		

		Contatti

Notare l’inclusione della libreria jquery (direttamente dai server Google ), di uno style.css e del contatti.js che sarà lo script con cui lavoreremo maggiormente.

Aggiunta del contenuto

Per adesso non abbiamo scritto nulla, perciò prosegui con l’inserimento di un po’ di contenuto. I campi nome, e-mail, testo sono indispensabili e perchè no, anche un campo non obbligatorio per aggiungere un eventuale proprio sito web, oltre che ovviamente il pulsante di invio; il tutto incluso nel canonico

che punta ad un certo inviaemail.php.


	
		Contattaci direttamente via email

		

		

		

		Testo*

Sono da segnalare gli ID che corrispondono esattamente ai name dei vari campi (questo ci tornerà molto utile per la gestione dai dati da php in caso di javascript disabilitati), la presenza di un immagine di caricamento accanto al pulsante e uno span con ID result al momento vuoto. La classe form come anche l’ID contact_area sono del tutto arbitrari, servono solo a facilitare il lavoro sul CSS.

Un po’ di stile CSS

Se provi a visualizzare questa pagina nel browser il risultato non sarà certo dei migliori.

Senza perdere altro tempo aggiungi un po’ di stile in un nuovo file CSS che dovrai chiamare style.css come indicato nell’head dell’HTML.

body {
	margin: 0;
	background: #ddd;
	color: #000;
}

h2 {
	font: bold 22px verdana;
	color: #333;
}

#contact_area  {
	width: 500px;
	margin: 0 auto;
}

.form {
	margin: 0 0 10px 0;
	width: 500px;
	font: normal 13px verdana;
	border: 1px solid #aaa;
	background: #eee;
	padding: 6px 10px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
}

#invia {
	font: normal 16px verdana;
	border: 1px solid #aaa;
	background: #c9c9c9;
	padding: 2px 10px;
	margin: 0 10px 0 0;
	cursor: pointer;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
}

#load_img {
	display: none;
	line-height: 26px;
}

.error {
	border: 1px solid #ff5c5c
}

.fail {
	color: #F80000
}

.success {
	color: #009600
}

Non ho alcuna intensione di soffermarmi sui vari accorgimenti usati nel CSS, ma devo far notare che abbiamo nascosto l’immagine di caricamento (linea 40) ed aggiunto le classi error, fail, success il cui scopo sarà più chiaro in seguito.

Direi senza alcun dubbio che l’aspetto è migliorato .

Aggiunta del motore (jquery)

Ora che hai tutto pronto, entriamo nel vivo della programmazione jquery. Crea il file contatti.js e aggiungi queste prime linee di codice.

$().ready(function(){

	//variabili globali
	var name = $("#name");
	var nameText = $(name).val();
	var email = $("#email");
	var emailText = $(email).val();
	var sito = $("#sito");
	var sitoText = $(sito).val();
	var message = $("#testo");
	var messageText = $(message).val();

});

Per adesso abbiamo solo dichiarato alcune variabili globali che useremo da quì in avanti. In particolare, abbiamo assegnato una variabile ad ogni campo della pagina HTML e ne abbiamo salvato il contenuto in un’altra variabile.

Per esempio, il campo con ID name, sarà indicato d’ora in poi semplicemente con “name” ed il suo contenuto predefinito, quello che possiede nel momento in cui la pagina viene caricata (in questo caso “Nome*“), verrà memorizzato nella variabile nameText.

Gestione dei valori di default nei singoli campi

Per far sì che i valori dei campi si azzerino quando ricevono il focus e tornino come predefiniti se non viene inserito alcun dato, aggiungi queste semplici funzioni.

	//name
	name.focus(function(){
		if($(this).val() == nameText) $(this).val("");
	});
	name.blur(function(){
		if($(this).val() == "") $(this).val(nameText);
	});
	//email
	email.focus(function(){
		if($(this).val() == emailText) $(this).val("");
	});
	email.blur(function(){
		if($(this).val() == "") $(this).val(emailText);
	});
	//Sito web
	sito.focus(function(){
		if($(this).val() == sitoText) $(this).val("");
	});
	sito.blur(function(){
		if($(this).val() == "") $(this).val(sitoText);
	});
	//message
	message.focus(function(){
		if($(this).val() == messageText) $(this).val("");
	});
	message.blur(function(){
		if($(this).val() == "") $(this).val(messageText);
	});

In tal modo, quando viene selezionato (.focus) un certo campo, la funzione ne azzera il contenuto se questo corrisponde a quello predefinito nell’HTML e quando il focus viene perso (.blur), se l’utente non ha aggiunto alcunchè, lasciando il campo vuoto, ne ripristina il valore predefinito.

Validazione dei contenuti

Per eseguire la validazione dei dati inseriti dall’utente, creeremo una funzione apposita per ogni campo che ne valuti la correttezza secondo criteri del tutto arbitrari. In questo caso, abbiamo imposto una lunghezza minima di nome utente e testo dell’email a 4 caratteri, mentre l’email dovrà rispettare la canonica forma [qualcosa]@[qualcosa].[qualcosa] .

function validateEmail(){
		var a = $("#email").val();
		var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
		if(filter.test(a)){
			$("#email").removeClass("error");
			return true;
		}
		else{
			$("#email").addClass("error");
			return false;
		}
	}
	function validateName(){
		if((name.val().length < 4) || (name.val() == nameText)){
			name.addClass("error");
			return false;
		}
		else{
			name.removeClass("error");
			return true;
		}
	}
	function validateMessage(){
		if((message.val().length < 4) || (message.val() == messageText)){
			message.addClass("error");
			return false;
		}
		else{
			message.removeClass("error");
			return true;
		}
	}

Per il controllo sulla lunghezza di un campo abbiamo usato la funzione .lenght che restituisce il numero di caratteri di una stringa; la validazione dell’email è invece un po’ più complessa poiché fa uso di una regex confrontata alla stringa con la funzione .test(), quindi prendila pure per buona .

Un ulteriore controllo è stato eseguito sui campi testo e nome che non devono essere uguali a quelli preimpostati (linee 14 e 24), infatti, essendo “Nome*” e “Testo*” di per sé due stringhe più lunghe di 4 caratteri, verrebbe vanificata la validazione.

Notare inoltre, che ciascuna funzione restituisce false e aggiunge una classe error a quel campo, se la validazione ha avuto esito negativo; altrimenti, restituisce true e toglie la classe error (nel caso sia stata precedentemente applicata).

Passaggio dei dati con Ajax

Adesso non resta che inviare i dati al php tramite ajax.

	$("#contatti").submit(function(){
		if(!validateName() | !validateEmail() | !validateMessage()){
			return false;
		}
		else {
			//Invia email con ajax
		}
	});

Prendiamo il click sul pulsante invia (o meglio il submit del form con id contatti) come evento da cui partire e quindi sottoporre i dati alla validazione.

       else {
			$('#load_img').fadeIn();
			$.ajax({
				type: 'post',
				url: 'inviaemail.php',
				data: 'name=' + name.val() + '&email=' + email.val() + '&site=' + sito.val() + '&message=' + message.val(),

                                //.........

			}); // end ajax
			return false;
		}

Se la validazione viene superata: faccio apparire l’immagine di caricamento con un effetto fade in (linea 2) e poi, con metodo POST (linea 4), invio al file inviaemail.php, che si trova nella stessa cartella (linea 5), i dati contenuti all’interno dei vari campi, assegnando ad ognuno una variabile da far gestire al php (linea 6).

Prima di proseguire devi però sapere come è strutturato il file inviaemail.php.

Invio dell’email con PHP

La parte php è piuttosto semplice.

Assegno alla variabile mailTo il mio indirizzo email dove voglio ricevere tutti i messaggi del contact form.

	$name = htmlspecialchars($_POST['name']);
	$mailFrom = htmlspecialchars($_POST['email']);
	$siteurl = htmlspecialchars($_POST['site']);
	$message_text = htmlspecialchars($_POST['message']);
	$subject = 'Messaggio dal contact form';

Prendo le variabili che mi ha precedentemente inviato ajax con metodo POST, le sottopongo alla funzione del php htmlspecialchars per correggere eventuali caratteri speciali e ne passo il contenuto in altrettante variabili php. Aggiungo anche un oggetto all’email, che mi faccia capire di cosa si tratta quando me la ritroverò nella casella di posta.

Aggiornato. Perché l’email risulti leggibile, è bene far in modo che appaia nel formato HTML. Aggiungo dunque una variabile headers con queste informazioni.

	$headers = 'Content-type: text/html; charset=UTF-8' . "\r\n";
	$headers .= 'From: '.$mailFrom;

La presenza del parametro From inoltre, evita che l’email appaia nella casella spam di certi servizi webmail tipo GMail.

$message = " $subject

----------------------------------------

Nome Utente: $name
e-Mail: $mailFrom
Sito: $siteurl
Testo della richiesta:

$message_text

----------------------------------------

Riunisco tutti i dati in un’ulteriore variabile message, in modo da comporre effettivamente il testo del messaggio di posta che riceverò. Notare la presenza di tutti i canonici tag HTML.

	if (mail($mailTo, $subject, $message, $headers))
		echo "email inviata!";
	else {
		echo "Errore";
	}

Con il comando mail() viene inviata effettivamente l’email e se non ci sono stati errori da parte del server in quest’ultima operazione, scrive il messaggio “email inviata!“; altrimenti scrive “Errore“.

Completamento del codice ajax

Adesso che sai cosa succede dal lato php, torniamo al nostro ajax.

		else {
			$('#load_img').fadeIn();
			$.ajax({
				type: 'post',
				url: 'inviaemail.php',
				data: 'name=' + name.val() + '&email=' + email.val() + '&site=' + sito.val() + '&message=' + message.val(),
				success: function(results) {
					$('#load_img').fadeOut(function() {
						if(results == "email inviata!") {
							$('#result').html("e-Mail inviata correttamente");
							$(name).val(nameText);
							$(email).val(emailText);
							$(sito).val(sitoText);
							$(message).val(messageText);
						}
						else
							$('#result').html("Errore")
					});
				}
			}); // end ajax
			return false;
		}

Dopo l’invio dei dati al php alla riga 6, siamo pronti a ricevere il risultato dell’operazione e salvarlo in una variabile qualsiasi che abbiamo chiamato result.

Nascondiamo l’immagine di caricamento (linea 8 ) e se il risultato del php corrisponde a ciò che avevamo scritto col comando echo, significa che l’email è stata inviata e possiamo dunque scrivere sulla pagina HTML (dentro a quell’inutilizzato span con id results) una notifica di operazione completata con successo; dato che l’email è stata inviata, possiamo anche riazzerare i campi ai valori predefiniti.
Se c’è stato un problema sul php, mostreremo invece un messaggio di errore.

Con i javascript disabilitati?

Nel caso si tenti di inviare un email con i javascript disabilitati, non ci sarà alcun tipo di controllo sulla validazione dei dati, ma l’email verrà comunque inviata, poiché le variabili che abbiamo preso con metodo POST nel php corrispondono esattamente ai parametri name=”" assegnati nell’HTML ai vari campi.

Inviando l’email senza javascript, vieni rimandato alla pagina inviaemail.php contenente la sola scritta “email inviata!” oppure “Errore” nel caso si siano verificati o no errori sul php.

Conclusioni

Sperando che ti sia stato di aiuto, ti lascio i link per la demo ed il download del pacchetto completo.

Per qualsiasi tipo di osservazione o critica, un commento è sempre bene accetto!

LINK DEMO link download

BitTrack » contact