Question

The logic i am trying to do is:

input field starts white (Normal);
after somebody finish typing, if the email does not exists, the input gets light red;
if the email exists in the database, the input becomes white again;

I have my code like this:

index.php

<?php
include 'my database connection page';
include 'page that return me an array with all the emails';
?>
<form method="POST">
    <input type="text" name="email" id="email_field" onFocus="changeColorEmail(this)">
    <input type="submit">
</form>

scripts.js

function changeColorEmail(which) {
    which.value = which.value.split(' ').join('')
        if (which.value == "<? echo $user_data['user_email'] ?>") {
            which.style.background = '#ffffff';
    }else {
            which.style.background = "#ffebe8";
    }
}

Any ideas are appreciated!

user.php (contain a function that verify if the email exists in database)

function email_exists($email){
    return (mysql_result(mysql_query("SELECT COUNT(user_id) FROM user WHERE user_email = '$email'"), 0) == 1) ? true : false;
}

Answer 1

ok, two ways to do this:

Hard way:
You’re going to need to capture the onblur event – which will fire when they leave the email box, you’re also going to need a bit of AJAX to send that value back to your script to test if it’s valid or not.

jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"/>
<script>

function ValidateEmail(email)
{
   var url = 'validateemail.php?email=' + email;

   $.getJSON( url, function(data) {

       var result = jQuery.parseJSON(data);
       var ctrl = $("#email_field");

       if(result.isValid == "true") {
           ctrl.addClass("valid").removeClass("inValid");
       }
       else {
           ctrl.addClass("inValid").removeClass("valid");
       }
   });
}

$(document).ready(function() {

     // change blur to keyup if you want it to validate as they type (bad idea)
     $("#email_field").bind("blur", function(){
         ValidateEmail($(this).val());
     });
});

</script>

(not tested, but should give you the general idea)

you’ll need a script called validateemail.php on your server – it should pick up the email parameter and then return either:

{"isValid": "true"} or {"isValid": "false"}

depending on the value of email.

Easy way:
Add two css classes to your page (valid and inValid) – when the page is submitted, if the email exists add the valid class to the input control, if it doesn’t add the invalid class instead.

CSS:

.valid { color: #ffffff; }
.invalid { color: #ffebe8; }

PHP:

<input type="text" 
    name="email" 
    id="email_field" 
    onFocus="changeColorEmail(this)"
    <?echo 'class="'.(email_exists($_GET['email']) ? 'valid': 'inValid').'"';?>
>

try the second one first

UPDATED: bug fixes