Email validation in angular 1.3

Question

I have a form which has couple of text box and a Submit button. One of the text box is an email. I am using angular and below is the code I found from one this reference-: http://plnkr.co/edit/T2X02OhKSLBHskdS2uIM?p=preview

<form name="inviteUserForm" ng-submit="inviteUser(inviteUserForm.$valid)" novalidate>
  Email: <input type="email" name="input" ng-model="text" required>
  <br>
  <span class="error" ng-show="inviteUserForm.input.$error.required">
    Required!
  </span>
  <span class="error" ng-show="inviteUserForm.input.$error.email">
    Not a valid email!
  </span>
  <br>
  <button type="submit" class="btn btn-default btn-primary btn-shaded ng-scope" ng-disabled="sending" translate="">Send Invite</button>
</form>

Now It as in the demo in the link it allows certain items as a valid email address like-:

me@ex = is a Valid emailId me@ex.c = is a Valid emailId

problem is when I hit submit for above emails it never gets send to the email address (because emailId is not valid).

I'd appreciate any feedback.

Update-:

Thanks for the comments. As per your feedback I've updated my code to use ng-pattern now. Below is the screenshot of actual code using ng-pattern.

still having the same issue.

Answer 1

Use ng-pattern like this.

<input type="email" name="input" ng-model="text" ng-pattern="/^[az]+[a-z0-9._]+@[az]+\\.[az.]{2,5}$/" required >

And add one span

<span class="error" ng-show="inviteUserForm.input.$error.pattern">
    Invalid email address. !
</span>

Answer 2

in your controller

function validate() {
$scope.isValidEmail = false;
                  var pattern = /^(([^<>()[\]\\.,;:\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,}))$/;
                  if ($scope.text) {
                      if (!pattern.test($scope.text)) {
                          $scope.isValidEmail = true;
                      } else {
                          $scope.isValidEmail= false;
                      }
                  }
 }

in your html page

<input type="email" name="input" ng-model="text" ng-change="validateEmail()">
 <span ng-show="isValidEmail" class="error">Invalid email address. Please re-enter your email address.</span>
<button type="submit" class="btn btn-default btn-primary btn-shaded ng-scope" ng-disabled="isValidEmail" translate="">Send Invite</button>