[Solved-5 Solutions] Valid email address in javascript - javascript turorial


How to validate an email address in JavaScript ?

Solution 1:

Using regular expressions.

function validateEmail(email) 
    var re = /^(([^<>()\[\]\\.,;:\[email protected]"]+(\.[^<>()\[\]\\.,;:\[email protected]"]+)*)|(".+"))@((\[[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);

Regular expresion that accepts unicode:

var re = /^(([^<>()\[\]\.,;:\[email protected]\"]+(\.[^<>()\[\]\.,;:\[email protected]\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\[email protected]\"]+\.)+[^<>()[\]\.,;:\[email protected]\"]{2,})$/i;

JavaScript can be easily disabled. This code is validate on server side.

function validateEmail(email) 
  var re = /^(([^<>()[\]\\.,;:\[email protected]\"]+(\.[^<>()[\]\\.,;:\[email protected]\"]+)*)|(\".+\"))@((\[[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() 
  var email = $("#email").val();
  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;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <p>Enter an email address:</p>
  <input id='email'>
  <button type='submit' id='validate'>Validate!</button>

<h2 id='result'></h2>

Solution 2:

Using regular expression:

/\[email protected]\S+\.\S+/

Javascript function is used to validate email address.

function validateEmail(email) 
    var re = /\[email protected]\S+\.\S+/;
    return re.test(email);

Solution 3:


<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>JavaScript form validation - checking email</title>
<link rel='stylesheet' href='forms-style.css' type='text/css' />      
<body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>Input an email and Submit</h2>
<form name="form1" action="#"> 
<li><input type='text' name='text1'/></li>
<li> </li>
<li class="submit"><input type="submit" name="submit" value="Submit" onclick="ValidateEmail(document.form1.text1)"/></li>
<li> </li>
<script src="email-validation.js"></script>

In JavaScript:

function ValidateEmail(inputText)
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
return true;
alert("You entered an invalid email address!");
return false;


list-style-type: none;
font-size: 16pt;
.mail {
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
width: 400px;
background : #D8F1F8;
border: 1px soild silver;
.mail h2 {
margin-left: 38px;
input {
font-size: 20pt;
input:focus, textarea:focus{
background-color: lightyellow;
input submit {
font-size: 12pt;
.rq {
color: #FF0000;
font-size: 10pt;

Solution 4:

Here there are lots of complexity.

\[email protected]\S+

Using this code to catches the most obvious errors then user can easily rectified the errors.

Solution 5:

function validateEmail(value) {
  var input = document.createElement('input');

  input.type = 'email';
  input.required = true;
  input.value = value;

  return typeof input.checkValidity == 'function' ? input.checkValidity() : /\[email protected]\S+\.\S+/.test(value);

Related Searches to Valid email address in javascript - javascript tutorial