Why don't my nested if and else statements work?

Question

All I want to be able to do is validate an email every time the user enters a new character into the input field. When the input field is empty, it shouldn't show anything, but when it contains letters, it should show where the invalid characters are.

My code works but doesn't show nothing when the input field is empty because it uses the nested 'else' instead of the one it should use. anyone help? thanks in advance. andyy

var tick = "<img src='images/tick.png' width='20' height='20'/>";
var cross = "<img src='images/cross.png' width='20' height='20'/>";
var email_element = document.contact_form.email_field.value;
function validate_email(id) {
     if ( email_element != '' ) {
        var letters = /^[A-Za-z]+$/;
        if ( document.contact_form.email_field.value.match(letters) )
        {
            document.getElementById(id).innerHTML = tick;
                valid = true;
        } else {
            document.getElementById(id).innerHTML = cross;
            valid = false;
        }
    } else {
        document.getElementById(id).innerHTML = '';
    }
    return valid;
}

Answer 1

The problem is most likely this line:

var email_element = document.contact_form.email_field.value; 

You are assigning a global variable equal to the value of the email field, and then never updating that variable again. This does not create an "active" link to the current value of the field, it just stores the value as it was when that line was executed. Which in turn means that the first if statement in your function, if ( email_element != '' ) , is evaluating a non-current value of the email field.

Move that line to be the first thing inside your function and then every time the function runs you'll get the latest (current) value of that field.

EDIT: Also, you are not assigning a value to valid in the non-nested else. You should declare valid as a local variable in the function and be sure to set it appropriately in every if and else branch (or default it to false when you declare it). As thomasrutter said you are not currently declaring valid with the var statement in your function, which means it will be created as a global variable, which in turn means that when you don't give it a value in your non-nested else your function will return whatever value valid already had from the previous call. (And really, based on the code you've posted, you don't need the valid variable at all: you could just say return true; or return false; directly inside each branch of your if/else structure.)

Answer 2

Try replacing the expression email_element != '' with document.contact_form.email_field.value != '' as I suspect email_element is a reference to an element and will never be equal to '' . Better yet, create a local variable email_value and assign it the value of document.contact_form.email_field.value and use it in both places as in,

function validate_email(id) {
  var email_value = document.contact_form.email_field.value;
  if ( email_value != '' ) {         
    var letters = /^[A-Za-z]+$/;
    if ( email_value.match(letters) ) {
       document.getElementById(id).innerHTML = tick;
       valid = true;
    }
    else {
      document.getElementById(id).innerHTML = cross;
      valid = false;
   }
  } 
  else {
    document.getElementById(id).innerHTML = '';
  }
  return valid; 
} 

Answer 3

When setting email_element, you are getting the value once, by copy, because it's a string. So if when the page loads that field is blank, email_element is now set to '' and remains set to it until you set it again.

Tags are set by reference, so what you probably intended is:

var email_element = document.contact_form.email_field;
. . .
if(email_element.value != '')