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'[email protected]" .
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 !
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; 
\. must be escaped twice as it is an expression WITHIN a string. \\.
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"> 
<input type="text" ng-model="field" ng-pattern="MYUNIEMALREGEX" />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. :)
why do you return undefined?
Refactoring of the function:
var verificationEmail = function (viewValue) { if ((typeof viewValue != "undefined") && viewValue != "") { return regex.test(viewValue); } }; 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.
