Downside of AngularJS built-in email validation Vs ng-pattern

Question

Is there any downside to using AngularJS built-in email validation, compared to using ng-pattern with email regex?

http://www.w3schools.com/angular/angular_validation.asp

Btw, Is this AngularJS email validation or is it using HTML5 validation?

Depends on the regex you want. No simple way to answer a vague question like this — charlietfl, Jan 09 '17 at 02:02
Possible duplicate of [Validate email address in JavaScript?](http://stackoverflow.com/questions/46155/validate-email-address-in-javascript) — ti7, Jan 09 '17 at 04:10
@charliettfl: For the context, I assumed that the related standards (RFCs) around email addresses would be such that, at least almost all valid email addresses would pass some standard library checks. For example, I assumed HTML5 email address validation would be able to identify almost all email addresses with minimal false positives. I thought standards like HTML5 providing such reliability (here, on email addresses) can be expected. I assumed the same with Angular built-in email validation. Here is where I wondered if Angular built-in validation is underneath relying on HTML5 validation. — sam, Jan 17 '17 at 00:42

score 0 · Answer 1 · answered Jan 09 '17 at 04:10

0

For a website, you should be OK only checking for an @ as users can always change your frontend. In your case, you're using an HTML5 validation, which will be even better.

From the link you provided:

Use the HTML5 type email to specify that the value must be an e-mail

However, your web back-end can and should do more stringent checking to ensure you actually received a real email address before using it for anything.

answered Jan 09 '17 at 04:10

ti7

16,375
6
40
68

Thank you ti7. That's helpful. – sam Jan 17 '17 at 00:42

score 0 · Answer 2 · answered Jan 09 '17 at 09:15

There are some differences between HTML5 email validation and angular ng-pattern. Generally it depends on what pattern type you are using. Below is a simple example
1. HTML5
e@e is valid email with html5 whereas
2. ng-pattern as shown in code
e@e is invalid email address and you can customize, you can make it valid using different ng-pattern
From above two examples as you know ng-pattern is effective when you need a strict email from the user

var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope) {
    $scope.emailAddr = /^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$/;
    $scope.submitBtn = function() {
    debugger;
     console.log($scope.htmlemailModel, $scope.emailForm.htmlemail.$valid);
      console.log($scope.angemailModel, $scope.emailForm.angemail.$valid);
      console.log($scope.emailForm.angemail.$viewValue, $scope.emailForm.angemail.$valid); // this line is just to show you the value even it is invalid
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
    <form name="emailForm" novalidate>
      HTML: <input type="email" name="htmlemail" ng-model="htmlemailModel" required/> <br /> <br />
      Angular: <input type="text" name="angemail" ng-model="angemailModel" ng-pattern="emailAddr" required/> <br /> <br />
      <button type="button" ng-click="submitBtn()">
      Submit
      </button>
    </form>
</body>

ng-pattern gives you the option to customize the validation

Thanks nivas. Do such email addresses (a@a) exist (and work) today? If not, are they expected to work in practice, in the future? In other words, I wonder why HTML5 considers such mail addresses as valid. — sam, Jan 17 '17 at 00:45
In order to support internationalized emails html5 allows emails without dot notation. you can find all types of email addresses here [link](https://en.wikipedia.org/wiki/Email_address#Internationalization) — nivas, Jan 17 '17 at 04:51
I don't seem to find anything in that link that suggests a@b is for supporting internationalized emails. Do such emails as admin@mailserver1 work? Would the name resolution to IP work, in this example for just 'mailserver1' without '.xyz'? — sam, Jan 19 '17 at 22:42
You don't find a@b there. You will find examples in "Internationalization examples" section. In your case `admin@mailserver1` is valid according to html5 but with angular custom validation `admin@mailserver1` is invalid. You can test emails by running above code snippet. — nivas, Jan 20 '17 at 04:50

Downside of AngularJS built-in email validation Vs ng-pattern

2 Answers2