How to validate email address in JavaScript?

Small tutorial with code examples on how to validate email address in JavaScript
06 September 2017   4827

The best way to valiade the email address in JavaScript is by using the regular expressions. 

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(email);
}

Here's the example of regular expresion that accepts unicode:

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

But nope that you 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:

 

unction 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(email);
}

function validate() {
  $("#result").text("");
  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;
}

$("#validate").bind("click", validate);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

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

 

Frontend News Digest 11 - 17.01

Learn about big Googles plans about cookies, TypeScript 3.8 Beta release, new Microsoft Edge built on Chromium and even more
17 January 2020   182

Greetings! I hope your week went great! Here's new frontend technologies news digest.

Learn that Google will phase out user-agent strings in Chrome, check the tips for building the apps for new, Chromium-based Microsoft Edge, check the speech of Monica Lent about building resilient frontend architecture at GOTO 2019 and other interesting articles, guides, updates, etc

Guides

  • Why should you use HSL color representation in CSS?

Learn why and (the main thing) how to sue the HSL color representation in CSS

Articles

  • Google to phase out user-agent strings in Chrome

Big company's move - Chrome plans to shift to using Client Hints instead of user-agent strings

  • Intent to experiment: Web NFC

Chrome experiments with the NFC, a lot of interesting things may appear

  • Get started building extensions for the new Microsoft Edge

If you would like to create any app for the new Microsoft browser - check this article and be advised its built on Chromium, so most existing extensions built for Chrome will work without any changes

  • Google plans to kill off third-party cookies in Chrome ‘within 2 years’

The grace period of 2 years is pretty a lot, but, an IT giant is asking advertisment industry to help create more privacy-based alternative to cookies

  • Microsoft spots malicious npm package stealing data from UNIX systems

This malicious package was active on the npm for two weeks and downloaded ‘at least 32 times’ before it was spotted by Microsoft

  • Array reduce vs Chaining vs for Loop 

Check the difference between different approaches of operating an array

Update

  • Upgrading to the new Microsoft Edge

The newest version of the Microsoft's web browser is built on Chromium, so this can really change a lot

  • Announcing TypeScript 3.8 Beta

The beta of the new version Microsoft-backed strict syntactical superset of JavaScript is available  - a good news for all TS coders

Video

  • GOTO 2019 • Building Resilient Frontend Architecture • Monica Lent