onblur email validation

by Neeraj Singh

HTML

<form name="signup_form">
  <input type="email" value="" onblur="validateEmail(this.value)">
  <br />
  <lable id="error"></lable>
</form>

CSS

#error {
  color: red;
  font-size: 2rem;
}

input[type='email'] {
  padding: 5px;
  width: 300px;
  border-color: blue;
  font-size: 16px;
}

JavaScript

function validateEmail(elementValue) {
  document.getElementById('error').innerHTML = elementValue + ', email is incorrect';
  var emailPattern = /^[a-z0-9](?:[a-z0-9]+\.)*(?!.*(?:__|\\.\\.))[a-z0-9_]+@(?:(?:(?:[a-zA-Z0-9](?:[a-zA-Z0-9](?!\.)){0,61}[a-zA-Z0-9]?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9](?!$)){0,61}[a-zA-Z0-9]?)|(?:(?:(?:[01]?\d{1,2}|2[0-4]\d|25[0-5])\.){3}(?:[01]?\d{1,2}|2[0-4]\d|25[0-5])))$/;
  if (emailPattern.test(elementValue)) {
    document.getElementById('error').innerHTML = elementValue + ', email is correct';
  }
  return false;
}