Your error is in line 20 (of my snippet, see below). You are passing your `email` `HTMLElement` to the `validateEmail()` function, not the inputs value. The correct code is the following, you had `validateEmail(email)`.
```js
if(email.value === ""){
// ...
}
else if (!validateEmail(email.value)){
// ...
}
else{
// ...
}
```
The full working code is then:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function validateEmail(email) {
const re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
const email = document.getElementById("email");
const no = document.getElementById("no");
const yes = document.getElementById("yes");
const mailText = document.getElementById("email-text");
const validEmail = document.getElementById("valid");
email.addEventListener("change", function(){
if(email.value === "") {
no.style.visibility = 'visible';
yes.style.visibility = 'hidden';
email.style.border = '2px solid red';
mailText.style.visibility = 'visible';
mailText.innerText = "Please enter an email address.";
validEmail.style.visibility = 'hidden';
} else if (!validateEmail(email.value)) {
no.style.visibility = 'visible';
yes.style.visibility = 'hidden';
email.style.border = '2px solid red';
mailText.style.visibility = 'hidden';
validEmail.style.visibility = 'visible';
} else {
yes.style.visibility = 'visible';
no.style.visibility = 'hidden';
email.style.border = '2px solid green';
mailText.style.visibility = 'hidden';
}
});
<!-- language: lang-html -->
<input type="text" id="email" />
<span id="yes">Yes</span>
<span id="no">No</span>
<span id="valid">Valid</span>
<p id="email-text"></p>
<!-- end snippet -->
Using [regular expressions][1] is probably the best way. You can see a bunch of tests [here][2] (taken from [chromium][3])
function validateEmail(email) {
const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}
Here's the example of regular expresion that accepts unicode:
const re = /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
But keep in mind that one should not rely only upon JavaScript validation. JavaScript can easily be disabled. This should be validated on the server side as well.
Here's an example of the above in action:
<!-- begin snippet: js hide: false console: true -->
<!-- language: lang-js -->
function validateEmail(email) {
const re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
function validate() {
const $result = $("#result");
const email = $("#email").val();
$result.text("");
if (validateEmail(email)) {
$result.text(email + " is valid :)");
$result.css("color", "green");
} else {
$result.text(email + " is not valid :(");
$result.css("color", "red");
}
return false;
}
$("#email").on("input", validate);
<!-- language: lang-html -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for=email>Enter an email address:</label>
<input id="email">
<h2 id="result"></h2>
<!-- end snippet -->
[1]: http://en.wikipedia.org/wiki/Regular_expression
[2]: http://jsfiddle.net/ghvj4gy9/embedded/result,js/
[3]: https://cs.chromium.org/chromium/src/third_party/blink/web_tests/fast/forms/resources/ValidityState-typeMismatch-email.js?q=ValidityState-typeMismatch-email.js&sq=package:chromium&dr
