Angular.js: REGEX for Email Address validates with incomplete email addresses

Created on 13 Nov 2014 · 6Comments · Source: angular/angular.js

When using the REGEX included in Angular for validating email addresses, it validates addresses without a finished domain ( user@domain will validate the same as [email protected] ). Therefore an incomplete email address passes validation when it shouldn't.

Steps to reproduce:

Create HTML page with angular.js , a <input type="email" required> , and some form of validation using $error or $invalid . Example is below.
Input the email address user@domain into the input field.
Validation will pass using angular's validation REGEX located here.

Live Example on Plunkr

Code Example:

<!DOCTYPE html>
<html>

  <head>
    <script src="//code.angularjs.org/1.3.1/angular.js"></script>
  </head>

  <body>
    <div ng-app>
    <h3>Email Address Validation with Angular</h3>
      <form name="contactForm" novalidate>
          <label for="emailaddress">Email Address:</label>
          <input type="email"
            name="emailaddress"
            ng-model="user.emailaddress"
            required>
      </form>
      <!--Error Messages for Email Field-->
          <div style="color:red; font-weight:bold;margin-top:20px;" ng-show="contactForm.emailaddress.$invalid">
              ERROR. Your email address does not validate with current Angular EMAIL_REGEXP.
          </div>
      </div>
  </body>

</html>

Current REGEX used:

var EMAIL_REGEXP = /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i;

Proposed REGEX change. This conforms to REGEX standard RFC 5322. Live Example:

var EMAIL_REGEXP = /[a-z0-9!#$%&'*+=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/g;

I tried changing the EMAIL_REGEXP to the proposed value above but when I ran the test suite, I received the following error:

Chrome 38.0.2125 (Mac OS X 10.10.0) input email EMAIL_REGEXP should validate email FAILED
    Expected false to be true.
    Error: Expected false to be true.
        at null.<anonymous> (/Users/benrondeau/Desktop/angularfix/angular.js/test/ng/directive/inputSpec.js:4081:49)
    Expected false to be true.
    Error: Expected false to be true.
        at null.<anonymous> (/Users/benrondeau/Desktop/angularfix/angular.js/test/ng/directive/inputSpec.js:4082:44)
    Expected false to be true.
    Error: Expected false to be true.
        at null.<anonymous> (/Users/benrondeau/Desktop/angularfix/angular.js/test/ng/directive/inputSpec.js:4087:42)

I am not knowledgeable enough about tests or Angular to figure out a fix that validates the test suite. Recommendations?

Thanks Angular team!!

forms duplicate won't fix

Source

benrondeau

Most helpful comment

Yes, an email address like "jslagle@math" is valid (for applications running INSIDE private domains). OUTSIDE such domains, the likes of "[email protected]" are required.
Perhaps the Forms Guide should provide a well-tested pattern for this most-frequent-of-all scenario. After all, the built-in validator only applies to applications "behind closed doors" (or firewalls, anyway).

jslagle on 1 Jul 2016

👍9

All 6 comments

We have received many issues such as this.

The issue you're having is, you (mistakenly) believe that a valid email address requires a top-level-domain label (at least one "." character in the portion of the email address following the "@").

This is in fact not correct, either in the RFC or in the recomendations of the WHATWG or W3C (see https://html.spec.whatwg.org/multipage/forms.html#valid-e-mail-address or http://www.w3.org/TR/html-markup/input.email.html for details).

You can easily write a custom validator to require a dot in the email domain label, but this does not match what is required by the specification, nor what web browsers do with native validation, so it does not seem appropriate that angular's email validator should do this.

caitp on 13 Nov 2014

👍3

Thanks for the clarification.

benrondeau on 13 Nov 2014

(There is also an example of how to overwrite the built-in validator in the Forms Guide.)

gkalpak on 14 Nov 2014

jslagle on 1 Jul 2016

👍9

How multiples email address validate?

leonmilx on 3 Sep 2018

Is there a way to validate sub addresses with a + in between words and use a . in the address in any combination? Basically, the most liberal possible email validation in angular?