Why does this js IF condition never evaluate to true?

Question

I'm working on a simple validation script to be sure the user has entered something that at least looks like a valid email address. This is a simplified version and can be tested on jsbin here .

HTML:

<form name="emailForm" action="whatever.php" method="post">
  <input name="email" id="email" type="text" onkeyup="checkEmail()" />
  <input type="submit" name="submit" id="submit" value="submit" disabled />
</form>
<div id="errorMsg">
  A valid email address is required.
</div>

JS

function checkEmail() {
  var email = document.getElementById("email").value;
  var valid = false;
  if (email.length > 5 && email.search("@") > 0 && email.search(".") > 0) {
    valid = true;
    document.getElementById("errorMsg").innerHTML = "";
  }
  document.getElementById("submit").disabled = valid == false;
}

My expectation is that any string that is more than 5 chars long and contains an @ and a . that are not in the first position should evaluate to true, but it never does no matter what is entered in the input. What am I missing here? I'm sure it's something foolish.

I have confirmed that the function is getting called and always returning valid=false by using an alert(valid) to troubleshoot.

Answer 1

You are setting #submit and valid to false no matter what valid value is.

document.getElementById("submit").disabled = valid = false;

should be

document.getElementById("submit").disabled = !valid;

Also, you should be using indexOf instead of search, and 0 is a completely valid index for both indexOf and search (you should be doing >= instead of > )

Answer 2

One of your issues is with this part of the test:

 && email.search(".") > 0

As others have pointed out, in the search method , the "." is used for a regular expression, so is equivalent to /./ , which matches any character, not a period. The test always returns false as the first character is at 0. Use "\\\\." to match a period, it's used to create a regular expression equivalent to /\\./ .

There are other issues:

1. Disabling the submit button doesn't stop the form being submitted. Validation needs to occur onsubmit too
2. You should not give any form control a name of "submit" as it masks the form's submit method
3. The error text is cleared when a "valid" email address is entered, but if the address becomes invalid, the text isn't replaced
4. Since the submit button is disabled by default, if the script fails it is never enabled. It is best to ensure the form works without any scripting, then add validation using script so that if anything fails, the form is still functional.

Most of these are fixed in the sample below. It uses the same listener for both the form and the input, so uses a bit of logic to get the value based on which listener was called.

 function checkEmail(el) { var form = el.form || el; var email = form.email.value; var valid = false; if (email.length > 5 && email.search("@") > 0 && email.search("\\\\.") > 0) { valid = true; } document.getElementById("errorMsg").innerHTML = valid? "" : 'A valid email address is required.'; document.getElementById("submitButton").disabled = !valid; return valid; } 

 <form onsubmit="return checkEmail(this)"> <input name="email" onkeyup="checkEmail(this)"> <input type="submit" id="submitButton" disabled> </form> <div id="errorMsg"> A valid email address is required. </div>