Username availability check using PHP and jQuery

Most common thing clients ask me to implement is to check if username that the user is trying to use during registration process is already taken.

This sounds complicated, but it really is not. jQuery will help us to achieve this functionality using very few lines of code.

I prefer AJAX approach as it is cool and users love it, as they know that username is free or taken even before they submit the actual form.

So let us create a table in mySQL to hold some user data:

[code lang=”sql”]
CREATE TABLE IF NOT EXISTS `users` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(255) NOT NULL,
`username` varchar(150) NOT NULL,
`email` varchar(100) NOT NULL’,
`pass` varchar(100) NOT NULL’,
PRIMARY KEY (`id`)
)
[/code]

This is small and typical users table. Now let’s create a small form for our example:

[code lang=”html”]

[/code]

In real life application this would be a bigger form, but I want to concentrate only on important things and that is username field. As you noticed, I already added a div with id of “results” which will hold our result data.

Now some jQuery magic:

[code lang=”javascript”]
$(function() {
$(“#sub”).click(function() {
// getting the value that user typed
var checkString = $(“#username_box”).val();
// forming the queryString
var data = ‘user=’+ checkString;

// if checkString is not empty
if(checkString) {
// ajax call
$.ajax({
type: “POST”,
url: “do_check.php”,
data: data,
beforeSend: function(html) { // this happen before actual call
$(“#results”).html(”);
},
success: function(html){ // this happen after we get result
$(“#results”).show();
$(“#results”).append(html);
}
});
}
return false;
});
});
[/code]

This jQuery code is making an AJAX call to PHP file do_check.php which is actually checking for username availability and return info about it. And here it is:

[code lang=”php”]
//if we got something through $_POST
if (isset($_POST[‘user’])) {
// here you would normally include some database connection
include(‘db.php’);
$db = new db();
// never trust what user wrote! We must ALWAYS sanitize user input
$username = mysql_real_escape_string($_POST[‘user’]);
// build your query to the database
$sql = “SELECT count(*) as num FROM users WHERE username = ” . $username;
// get results
$row = $db->select_single($sql);
if($row[‘num’] == 0) {
echo ‘Username ‘.$username.’ is available!’;
} else {
echo ‘Username ‘.$username.’ is already taken!’;
}
}
[/code]

Basically, code is checking in the database how many rows are in the users table with the username that we typed. If there are no such rows, the username is available.

The demo is available here