Create a Dynamic Username Validator with PHP, MySQL and jQuery

There are few Web-related tasks more annoying than registering for a new website account. Providing yet another online entity with various bits of personally identifiable information (did you know that in many cases you can be personally identified simply by providing your age, gender and zip code?) and frustrations surrounding a lengthy and often clumsy registration process are just two of the several aggravations which can arise when creating a new account.

In recognition of the widespread reluctance to manage multiple accounts, several decentralized authentication solutions have gained traction, including notably OpenID and Facebook, however such approaches also have problems. So in spite of the availability of these third-party authentication solutions many website developers still choose to go it alone and manage user accounts locally. If you fall into this latter grouping, it is incumbent upon you to take every step possible to streamline the registration process in order to reduce the risk of driving off frustrated users (many of whom will hopefully eventually become customers).

One of the easiest ways to streamline the registration process is by providing the user with real-time feedback regarding username availability. This is accomplished by monitoring the registration form’s username field and immediately following the user’s completion of this field, rather than waiting for the user to complete all fields and submit the form. Although a seemingly complex feature, it’s actually easily accomplished thanks to the powerful jQuery library. In this article I’ll show you to how create a username existence validator using jQuery, PHP and MySQL.

The MySQL Accounts Table

The MySQL table used to manage the user accounts (for the purpose of this example) is straightforward, consisting of an integer-based primary key, unique username field, and a hashed password field:

CREATE TABLE accounts (
  id INTEGER UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY,
  username VARCHAR(255) NOT NULL UNIQUE,
  password CHAR(32) NOT NULL
);

The username field’s UNIQUE constraint ensures two identical usernames aren’t stored in the database, which fulfills the important goal of data consistency. However we also want to provide registering users with real-time feedback regarding whether his username is available, necessitating client communication with the database by way of the PHP-based intermediary script.

jQuery’s blur Handler

The jQuery library supports multiple ways to trigger an event based on user actions, including when a form field loses focus as a result of the user tabbing or using the mouse to move to the next field. This event is known as a blur. As an example, suppose the registration form looks like this:

<form action="register.php" method="post">

  <p>
    Choose a username:<br />
    <input type="text" id="username" name="username" size="25" />
  </p>

  <p>
    Choose a password:<br />
    <input type="password" id="password" name="password" size="25" />
  </p>

  <p>
    <input type="submit" name="submit" value="Create Your Account" />
  </p>

</form>

We can use jQuery’s blur() method to fire when focus is removed from the username field, as demonstrated here:

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript" >
  google.load("jquery", "1");
</script>

<script type="text/javascript" charset="utf-8">
google.setOnLoadCallback(function() {
  $('#username').blur(function() {
    alert('You just left the username field.');
  });
});
</script>

We’ll use the blur() method in conjunction with jQuery’s Ajax capabilities to talk to a PHP script.