Javascript Program to Check If Email Address is Valid or Not in Browser Using HTML5 Form

SOURCE CODE

You can use the pattern attribute in an HTML5 input field to validate an email address. Here is an example:

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" required>
  <input type="submit" value="Submit">
</form>

<form>

<label for="email">Email:</label>

</form>

This will require the user to enter a value that matches the regular expression [a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$ in the input field. The required attribute ensures that the user must enter a value.

You can also use javascript to validate the email, Here is an example:

function validateEmail(email) {
  var 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());
}

if(validateEmail(email.value)) {
  alert("Email is valid");
} else {
  alert("Email is not valid");
}

function validateEmail(email) {

var 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());

}

if(validateEmail(email.value)) {

alert("Email is valid");

} else {

alert("Email is not valid");

}