Tim Butterfield
Check Email Availability

Being able to dynamically fetch a username or email and see if it is available, is very important on todays websites. Below I will show how easy it is to do this with JQuery and PHP. If you have a MySQL database set up already or even a database of another kind, it is simple to write the JQuery needed to check if an email is already there. This also assumes that you have prior coding knowledge of MySQL, PHP and JQuery.

First you have to set up the html file with a few form fields. Just a few simple form fields.

register.html

<form>
    <div>
        <label for="name">Full name:</label>
        <input type="text" name="name" id="name" />
        <span class="error" id="nameError"></span>
    </div>
    <div>
        <label for="emailCheck">Email Address:</label>
        <input id="emailCheck" type="text" name="email" autocomplete="off"/>
        <span class="error" id="emailError"></span>
    </div>
</form>

Next set up the PHP file that will check the database for the entered email/username. Make sure to escape the string. Also a good thing to do is lowercase the entire string. This will prevent users from taking an email that is the same except for 1 uppercase letter. MySQL has a function called LOWER that will come in handy, as for PHP, use strtolower().

validate.php

<?php

$hostname='localhost';
$username='username';
$password='password';
$active=' ';
$email = $_POST["email"];

try {
    $dbh = new PDO("mysql:host=$hostname;dbname=dbname",$username,$password);

$dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); // <== add this line

$nume = $dbh->query("select count(email) from table_name where email='$email'")->fetchColumn();

echo $nume;

$dbh = null;
    }
catch(PDOException $e)
    {
    echo $e->getMessage();
    }
?>

Finally we will setup the Javascript file with the JQuery.
I listen for a keyup event so that the field is checked with every keystroke. Checking on every keystroke is better for users since they are getting constant feedback on the availability of the email and not just when they submit the form. You could compliment this with a regular expression to check the validity of the email. Then querying the database as needed.

script.js

$(document).ready(function() {

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 2000;  //time in ms, 5 second for example

//on keyup, start the countdown
$('#email').keyup(function(){
    clearTimeout(typingTimer);
    typingTimer = setTimeout(doneTyping, doneTypingInterval);
});

//on keydown, clear the countdown 
$('#email').keydown(function(){
    clearTimeout(typingTimer);
    $('form input[type=submit]').attr('disabled', 'disabled');
});

//user is "finished typing," do something
function doneTyping () {
//gets the value of the field
        var email = $("#emailadd").val();

//displays a loader while it is checking the database
        $("#emailError").html('<img alt="" src="/img/loader.gif" />');
        //here is where you send the desired data to the PHP file using ajax
        $.post("/validate.php", {email:email},
            function(result) {
                if(result >= 1) {
                    //the email is available
                    $("#emailError").html("<span style='color:#FF0000;'>Email already registered</span>");
                    $('form input[type=submit]').attr('disabled', 'disabled');
                }
                else {
                    //the email is not available
                    $("#emailError").html("<span style='color:#4DB84D;'>Available</span>");
                    if($('form input[type=submit]').is(':disabled')) {
$('form input[type=submit]').removeAttr('disabled');
}
                }
            });
}

});

Its that easy! This example could easily be turned into checking for the username rather than an email.

Tim ButterfieldCheck Email Availability

Tim Butterfield
Check Email Availability