Angular JS Email Check with Unicode Characters

Question

I have a registration form for the application, and angular js is responsible for checking it.

I had a problem when angular js did not accept an email address that has an apostrophe. "Pear ' [e-mail] " .

I found out that angularJs does not like Unicode characters in an email address.

Has anyone else encountered such a problem, I am interested to know my options to get away with this error in angularJs.

Any inputs are appreciated. Thanks!

Answer 1

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

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

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

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

Answer 2

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

What you can do is write a directive that checks it yourself. Just copy the file from AngularJS and use your own regular expression: 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 simply do:

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

Answer 3

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

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

Answer 4

why do you return undefined?

Function Refactoring:

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

Answer 5

Angular does not support apostrophe ( ' ) in email id. If you need to check the apostrophe in Angular, you need to change the regex:

 (/^[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 just fine.