Controllo campo utente in un form di registrazione con JQuery

Registrandosi a un sito molte volte si scelgono username già presi o comunque occupati e si è talvolta costretti a ricompilare tutti i campi del form di registrazione (procedura molto sgradevole!), con questo articolo imparerete un semplice ma potente trucco per ovviare a questo fastidioso problema.

Questo inconveniente può essere infatti facilmente risolto controllando se il nick name è già stato utilizzato durante la digitalizzazione del testo da parte dell’utente; Per far ciò utilizzeremo come sempre  il potente framework jQuery e la funzione .load già vista poco tempo fa su Targetweb che ci permette di fare diverse azioni restando nella stessa pagina di navigazione.

Per prima cosa dobbiamo creare il nostro classico input di testo con un paragrafo dove andremo ad inserire se il nick (username) è disponibile oppure no.

<input type="text" name="username" value="" />
<p id="verifica"></p>

Ora non ci resta che usare jQuery per richiamare una pagina php che  andrà a controllare se il nick immesso nell’input è gia stato utilizzato da qualche altro utente nel nostro database.

$("input[name='username']").keyup(function() {
	var id = $(this).val();
	$('#verifica').load('verificanick.php?id='+id);
})

Fino a qui niente di complicato, ora andremo a creare la pagina “verificanick.php”, dove andremo a fare tutti i controlli necessari per la verifica del nick.

File verificanick.php

<?php
	//includiamo il file che ci connette al database
	include('config.php');
	//creiamo una variabile che contiene il nick immesso nell'imput
	$username = mysql_real_escape_string($_GET['id']);
	//ho inserito anche la funzione mysql_real_escape_string per prevenire alcune sqlinjection
	//effettuiamo la query al database
	$query = "SELECT * FROM nostra_tabella WHERE username='$username'";
	$result = mysql_query($query, $connection) or die('Errore' . mysql_error());
	//contiamo il numero di record restituiti dalla query tramite la funzione mysql_num_rows
	$numrows = mysql_num_rows($result);
	if($numrows >= 1) {
		//se è stato trovato almeno un risultato salviamo una variabile messaggio
		//con il testo "username già usato
		$messaggio = "username già usato";
	} else {
		//se invece non sono stati trovati risultati la variabile messaggio
		//conterrà il testo "username disponibile"
		$messaggio = "username disponibile";
	}
	//facciamo in modo che la pagina venga considerata con estensione .html
	header('Content-Type: text/html; charset=iso-8859-1');
	//stampiamo il messaggio
	echo $messaggio;
?>

La pagina esegue una query dove ricerca nella tabella dove sono stati registrati gli utenti un record che abbia come valore del campo username quello inserito nell’input.

Poi tramite un if controlliamo il numero di record trovati, se il numero di risultati sono uno o più restituiremo un messaggio di errore mentre invece se non sono stati trovati risultati daremo il via libera al nostro utente che potrà procedere con la registrazione usando il nick prescelto.

Come sempre vi invito a commentare l’articolo e a condividerlo sui vostri social network preferiti 😉

Spero che questo articolo vi sia stato utile 🙂 Domani vi aspettiamo con il riepilogo della settimana, i migliori script, e tendenze sul web design della settimana. da non perdere!

Vuoi una foto come quella in evidenza? Credits © Pavel Ignatov – Fotolia.com