EmailAddress

Email validation

by Jose Montero

HTML

<form method="post">

Email:<input type="email" name="email" size="45" required /><button type="submit">Validate</button>
</form>
<div id="result">

</div>

JavaScript

function emailCheck(email)
{
	var re = /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/;
	if (re.test(email))
	{
		return true;
	}
	return false;
}
function validatEmail()
{
	var email = document.querySelector("input[type=email]");
  
  email.addEventListener('invalid', function(e) {
    if(email.validity.valueMissing){
        e.target.setCustomValidity("PLZ CREATE A USERNAME, YO!"); 
    } else if(!email.validity.valid) {
        e.target.setCustomValidity("Invalid email address"); 
    } 
}, false);
  
  var result = emailCheck(email.value);
  
  var emailResult = document.querySelector("#result");
  emailResult.textContent = '';
  
  emailResult.insertAdjacentText("beforeend", "Email: "+email+" is "+(result ? 'valid' : 'invalid'))
}
document.querySelector("button").addEventListener('click', validatEmail);