Check username/email availability design question

Question

Hi guys, I'm pretty new to programming and html design and would like to ask a question some might consider silly.

Here goes:

I have a registration form that is validated with jQuery validation plugin. Within this form, there is an email and password input which will be used as login credentials.

What I would like to do here is check whether this email is available in my database(MySQL). If it is, user will be prompted to insert another email. If it's not, user goes ahead to claim that email. How do I go about doing this? Should I include a form within a form? For example, should I have an embedded form with a "Check availability" button like Gmail registration?

Is there a standard procedure to this? Please suggest a good and easy method.

Answer 1

You can use ajax for accessing a server side script for checking availability of email and then showing some notification/error message depending upon the response you get from server.

Like for example, on the blur event of email field (when it loses focus) you can fire off an event which has a call to a server side code using ajax and then depending upon the response, you can hide/show a particular which contains the error message.

Your email field might be like this...

<input type="text" name="email" class="email" />

jQuery code goes something like this...

$("input.email").blur( function() {
  $.ajax({
    url: 'ajax/getData.php?email=' + $(this).val(),
    success: function(data) {
      // Hide/show the error div over here
    }
  });
});

Answer 2

What you can do is go check the availability of the username through an jQuery http call when the user has finished typing something the email field (onblur). If its not available, you might want to give him or her a visual indication (for example, turn the field red) to prompt another email.

Keep in mind the following things though:

• Always do your validations server-side as well as client-side if you want to be robust.
• While you're doing the lookup, provide the user with some kind of visual indication that the search is ongoing, you can also disable the submit button while the search is ongoing. Don't forget to enable it back then :)