Question

I’m currently trying to implement a feature to check if an email has already been taken when a first time user registers for my site. I’m trying to do this with AJAX and use the jQuery tooltip (http://flowplayer.org/tools/tooltip/) plugin to display the message if the e-mail has in fact been taken.

I don’t want to display any message if the e-mail is not taken and don’t want the user to be aware of the fact that I’m checking their e-mail against the database, when they focus out of the e-mail input box. I only want to display a tooltip message if the e-mail has been taken and then make sure it dissapears if they provide a new unique e-mail address.

Here is my code thus far:
register.php (where the form is)

<div class="textboxfrm"><span class="label">Email<span style="color:#FF9000">* </span>              </span><span class="left"></span><span class="center"><input class="required validate-email" id="email" name="email" type="text" style="width:230px;" maxlength="50" />
</span>
<div class="tooltip_email"></div>
</div>

register.js (loaded on document.ready)

jQuery("span.center").tooltip({
    events: {
        span: 'dblclick, dblclick',
        input: 'blur, mouseout',
    },
    effect: "slide", 
    delay: 3000,
    onBeforeShow: function() {
        jQuery("#email").blur(function() { // when focus out

        email = jQuery('#email').attr('value');
        if (email.length > 1){
        jQuery.ajax({
            type: "GET",
            url: "checkusername.php",
            data: "email=" + email,
            success: function(data) {
                jQuery(".tooltip_email").html(data);    
            } 
        }); //end ajax call
       }//end if email > 1
       else { jQuery("span.center").tooltip.hide(); }
        //jQuery(".tooltip_email").hide();
    });//end email blur
    //return false;
   } // end onBeforeShow function
}); //end span.center tooltip

Finally, checkusername.php (where the database is accessed)

<?php
$email = $_GET['email'];

// connection settings stored in file
include("connectionParameters.php");

$connection = mysql_connect($host,$user,$pass)
    or die ("We're sorry, there seems to be an error. Please try again later.");

mysql_select_db($database);

$email = $_GET['email'];

mysql_select_db("testdatabase", $con);

$sql= sprintf("SELECT * FROM Users WHERE email='%s'", mysql_real_escape_string($email));

$result = mysql_query($sql);

$row = mysql_fetch_array($result);

$taken = $row['email'];

if(mysql_num_rows($result) > 0){
    echo "<p>This email belongs to a registered user. Please provide a different email address, or visit <a href='forgot_pass.php'>this</a> page to retrieve your password.</p>";
}
else if(mysql_num_rows($result) < 1) { exit(); }
mysql_close($con);

?>

To make the question a little clearer, the checking of the email is working correctly and I’m seeing the message if an email is taken via the tooltip. However, I’m also seeing the tooltip with no message if I hover over “span.center” or if I change the email to a valid one or If the email is greater than 2 characters. My problem is that I don’t want to see the tooltip box at all under any of those scenarios.

Answer 1

Do a basic check of the returned data in the AJAX response handler:

if (data != '') {
    jQuery(".tooltip_email").html(data);    
}

and only output your “error” message from the PHP script if the email’s actually taken. However, considering doing something a little more fancy, using a JSON data structure, which gives you far more flexibility:

if(mysql_num_rows($result) > 0) {
    $data = array('error' => true, 'message' => 'Email already taken';
} else {
    $data = array('error' => false, 'message' => 'Everything A-OK';
}
echo json_encode($data);

which you then handle in JS with:

if (data.error) {
    jQuery(".tooltip_email").html(data.message);    
}