ng-pattern for validating email not working

Question

I am using the following pattern to validate 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,}))$/igm;

Copied the pattern from this fiddle. (http://jsfiddle.net/jquery4u/5rPmV/) which works wonderful.

I tried implementing the same with AngularJS like this

    <input type="text" placeholder="Email" ng-model="Employer.Email" ng-pattern="emailPattern" class="form-control" name="email" required />
    <p ng-show="showMessages && registerEmployerForm.email.$error.required" class="text-danger">
      Email is required.
    </p>
    <p ng-show="showMessages && !registerEmployerForm.email.$error.required && registerEmployerForm.email.$error.pattern" class="text-danger">
      Email is invalid.
    </p>

JavaScript

$scope.showMessages = true;
$scope.Employer = {
  "Email": ""
};
$scope.emailPattern = /^(([^<>()[\]\\.,;:\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,}))$/igm;
$scope.RegisterEmployer = function(myForm) {
    console.log(myForm)
};

My Fiddle: http://jsfiddle.net/codeandcloud/jusoqs88/

The problem is that if I try naveen@naveennaveen.com, the first fiddle passes and the second fiddle fails. My questions

Why for the same pattern AngularJS behaves differently?
Is there something with my code?

P.S: I know input type="email" combined with registerEmployerForm.email.$error.email is the Angular way to do it. Unfortunately I cannot implement it here as the regex should not pass something like naveen@naveennaveen

may be help you http://stackoverflow.com/questions/23671934/form-validation-email-validation-not-working-as-expected-in-angularjs — Hadi J, Mar 15 '16 at 12:41
@hadiJZ: thanks it suit my need for now. wonder what makes angularjs behave differently — naveen, Mar 15 '16 at 20:14

alexey · Accepted Answer · 2016-03-15T13:33:47.417

0

Here is regexp for email validation:

var re = /^[a-z]+[a-z0-9._]+@[a-z]+\.[a-z.]{2,5}$/;

UPDATE

I can see this is not working in fiddle with 2 dots after @, but here it works : regex test online

UPDATE2

Looks like something wrong with fiddle, try this in your code, it will work:

var re = /^("")("".+?(?<!\)""@)|(([0-9a-z]((\.(?!\.))|[-!#\$%&'*\+=\?\^`\{\}\|~\w])*)(‌?<=[0-9a-z])@))([)([(\d{1,3}\.){3}\d{1,3}])|(([0-9a-z][-\w]*[0-9a-z]*\.)+[a-‌z0-9][\-a-z0-9]{0,22}[a-z0-9])$/

edited Mar 15 '16 at 13:33

answered Mar 15 '16 at 13:20

alexey

1,381
9
19

I ended up using this. http://stackoverflow.com/a/23672445/17447 Thanks for the answer. – naveen Mar 15 '16 at 20:13

score 0 · Answer 2 · answered Jan 22 '20 at 10:16

    <link rel="stylesheet" href="http://mbenford.github.io/ngTagsInput/css/ng-tags-input.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <script src="http://mbenford.github.io/ngTagsInput/js/ng-tags-input.min.js"></script>
    <script>
    var app = angular.module('ngApp', ['ngTagsInput']);

    app.controller('MainCtrl', function($scope, $http) {
      $scope.tags = [
        { text: 'abdo@tatwerat.com' },
        { text: 'info@tatwerat.com' },
        { text: 'admin@tatwerat.com' }
      ];
    });

    </script>
   <div ng-app="ngApp" ng-controller="MainCtrl">
      <tags-input ng-model="tags" placeholder="Add Emails" allowed-tags-pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$"></tags-input>
      <p>Emails : {{tags}}</p>
   </div>

ng-pattern for validating email not working

2 Answers2