Angular JS Email Validation with unicode characters

Question

I have a sign up form for an application, and angular js is responsible for its validation.

I ran into an issue when Angular js wasn't accepting an email address which has apostrophe in it. "Pear'lpeerh.shin@xyz.com" .

I found out that angularJs doesnt like unicode characters in email address.

Has anyone else came across an issue like this, I am interested in knowing my options to get away with this bug in angularJs.

Any inputs are appreciated. Thanks !

Have you considered writing a custom validation function? http://jsfiddle.net/adamdbradley/Qdk5M/ — shaunhusain, May 31 '13 at 18:44

score 17 · Accepted Answer · edited Feb 24 '14 at 10:44

17

If having html5 <input type=email /> is not critical, you can use <input type=text /> and pattern validation

 <input type="text" ng-model="field" ng-pattern="EMAIL_REGEXP" />

and you can use regex that @Andy Joslin posted in his answer

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

edited Feb 24 '14 at 10:44

EpokK

38,062
9
61
69

answered May 31 '13 at 19:00

vittore

17,449
6
44
82

The REGEX that you provided didn't address the apostrophe issue. I added " ' " in the REGEX in the angular.js file, and it worked. I didn't change the input type to "text" either. – Nanu Jun 03 '13 at 18:24
I checked your answer, as it may help someone with issues like these with the use of ng-pattern. – Nanu Jun 03 '13 at 18:29
When using this expression directly in the ng-pattern without a variable, the `\.` must be escaped twice as it is an expression WITHIN a string. `\\.` – Soviut Nov 28 '13 at 22:09
1

FYI is important if you are writing a mobile application to display a suitable keyboard for email entry – Anthony Johnston Mar 15 '16 at 16:57
1

tried this regex, didn't work for 'üñîçøðé@example.com – alphapilgrim Apr 03 '17 at 20:18

Andrew Joslin · Answer 2 · 2013-05-31T18:52:36.670

AngularJS uses this regular expression to test email: https://github.com/angular/angular.js/blob/master/src/ng/directive/input.js#L4

What you could do is write a directive that checks it yourself. Just copy the one from AngularJS and use your own regexp: https://github.com/angular/angular.js/blob/master/src/ng/directive/input.js#L606-L614

myApp.directive('nanuEmail', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, elm, attrs, model) {
      //change this:
      var EMAIL_REGEXP = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/;
      var emailValidator = function(value) {
      if (!value || EMAIL_REGEXP.test(value)) {
        model.$setValidity('email', true);
        return value;
      } else {
        model.$setValidity('email', false);
        return undefined;
      }
      model.$parsers.push(emailValidator);
      model.$formatters.push(emailValidator);
    }
  };
});

Then you can just do:

<input nanu-email ng-model="userEmail">

Alternatively he can just use `` – vittore May 31 '13 at 18:51 — vittore, May 31 '13 at 18:51

score 1 · Answer 3 · answered Jun 03 '13 at 18:26

I just updated the regex in the angular.js file (added " ' " in the expression) and it worked, without making any other changes.

EMAIL_REGEXP = /^[A-Za-z0-9._%+-']+@[A-Za-z0-9.-]+.[A-Za-z]{2,4}$/ . Thanks Vittore, for giving me the idea to update REGEX. :)

score 0 · Answer 4 · edited Jan 04 '16 at 12:23

0

why do you return undefined?

Refactoring of the function:

var verificationEmail = function (viewValue) {
  if ((typeof viewValue != "undefined") && viewValue != "") {
    return regex.test(viewValue);
  }
};

edited Jan 04 '16 at 12:23

Mo.

26,306
36
159
225

answered Mar 29 '14 at 19:13

user3476503

1

score 0 · Answer 5 · edited Mar 03 '17 at 12:59

0

Angular do not support the apostrophe(') in email Id. If you need to validate the apostrophe in Angular, you need to change the regular expression from:

(/^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/)

To:

/^[A-Za-z0-9._%+'-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/.

It will work perfectly.

edited Mar 03 '17 at 12:59

Bugs

4,491
9
32
41

answered Mar 03 '17 at 11:09

jitendra Prasad

11
2

Angular JS Email Validation with unicode characters

5 Answers5

Linked