Change input background color if the value of the input is valid in database

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;
}

You missed echo in if and also quotes -> ` "<? echo $user_data['user_email'] ?>" ` — Engineer
– Engineer, Commented May 16, 2012 at 19:46
Your edit and mine are done at same time, so your edit overrided mine. I will try edit again. — Engineer
– Engineer, Commented May 16, 2012 at 19:59

web_bod · Accepted Answer · 2012-05-16 20:50:22Z

3

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

edited May 16, 2012 at 20:50

answered May 16, 2012 at 19:46

web_bod

5,7681 gold badge19 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

André Oliveira Over a year ago

Thanks for the answer, i would like it to be more dynamically.. the hard way can check the moment that the person is typing? if yes, could you provide me an example of that?

web_bod Over a year ago

It's a lot more technical - you'll need to use jQuery, unless you're really comfortable with JavaScript

André Oliveira Over a year ago

this is a nice and simple solution, but my function changeColorEmail(this) is with an error of syntax when i put this '"<? $user_data['user_email'] ?>"'

André Oliveira Over a year ago

got ur idea, but can´t i use my function instead of create another page to verify if the email exists? I already have a separate page called users.php that contains a function to verify if the email exists, it returns true or false.

web_bod Over a year ago

that php fragment should replace the relevant bit of html - what did it return when you ran it?

|

soimon · Accepted Answer · 2012-05-16 19:53:18Z

You should change onFocus to onkeyup, because you seem to want to validate the e-mail address while the user is typing.

From an interaction design point of view I would advice you to change the color to red only when the final input is invalid, and change the timing of your validation process.

Although red is indeed easily associated with "wrong", it might be confusing for the user when giving the field focus is already considered wrong. I would advice you to start validating when the onblur event fires - when the user is obviously done typing - and/or when the user still has focus but hasn't pressed a key for a certain amount of time.

If I would be the user, that would be the behavior I would feel most comfortable with, and also the behavior I would directly interpret as "I've entered an invalid e-mail address".

Brendan · Accepted Answer · 2012-05-16 20:03:43Z

1

First off, your use case seems to have some usability issues. Typically, a field will not give indication of validation results until it has lost focus. This way, you aren't interrupting the user with validation errors when they haven't finished inputting their data.

Concerning how to accomplish asynchronous validation, you're going to use an XMLHttpRequest (e.g. using jQuery's $.ajax()).

In your use case, the input is valid only if the email address already exists. In that case, you could make a separate PHP page (e.g. email_exists.php) that simply echoes the text true or false depending on whether or not the passed email exists.

E.g.
Request: http://example.com/[email protected]
Response: true or false as it may be.

Finally, register an "onChange" or "onBlur" event listener to your input. When it fires, you $.ajax() the email address to the PHP page as described above and check the response. You can then add/remove classes based on the response to give the input element the desired look.

answered May 16, 2012 at 20:03

Brendan

1,87311 silver badges19 bronze badges

1 Comment

André Oliveira Over a year ago

I already have this separate PHP page with a function that verify if the email exists. But i dont know how to incorpore with $.ajax()

Collectives™ on Stack Overflow

Change input background color if the value of the input is valid in database

3 Answers 3

13 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

13 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related