How to validate email id in angularJs using ng-pattern

Question

Am trying to validate an Email id field in angularJs using ng-pattern directive   But am new to AngularJs  I need to show an error message as soon as the user enters the wrong email id   The code which I have below is am trying to solve  Help me out with using ng-pattern for getting the proper result    lt script type  text javascript  src   Login script ang js  gt  lt  script gt   lt script type  text javascript  gt      function Ctrl  scope             scope text    enter email            scope word      a-z   a-z0-9      a-z     a-z   2 5            lt  script gt       lt  head gt   lt body gt       lt form name  myform  ng-controller  Ctrl  gt           lt input type  text  ng-pattern  word  name  email  gt           lt span class  error  ng-show  myform email  error pattern  gt              invalid email           lt  span gt           lt input type  submit  value  submit  gt       lt  form gt   lt  body gt

User · Accepted Answer

If you want to validate email then use input with type="email" instead of type="text". AngularJS has email validation out of the box, so no need to use ng-pattern for this.

Here is the example from original documentation:

<script>
function Ctrl($scope) {
  $scope.text = '[email protected]';
}
</script>
<form name="myForm" ng-controller="Ctrl">
  Email: <input type="email" name="input" ng-model="text" required>
  <br/>
  <span class="error" ng-show="myForm.input.$error.required">
    Required!</span>
  <span class="error" ng-show="myForm.input.$error.email">
    Not valid email!</span>
  <br>
  <tt>text = {{text}}</tt><br/>
  <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
  <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
  <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
  <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
  <tt>myForm.$error.email = {{!!myForm.$error.email}}</tt><br/>
</form>

For more details read this doc: https://docs.angularjs.org/api/ng/input/input%5Bemail%5D

Live example: http://plnkr.co/edit/T2X02OhKSLBHskdS2uIM?p=info

UPD:

If you are not satisfied with built-in email validator and you want to use your custom RegExp pattern validation then ng-pattern directive can be applied and according to the documentation the error message can be displayed like this:

The validator sets the pattern error key if the ngModel.$viewValue does not match a RegExp

<script>
function Ctrl($scope) {
  $scope.text = '[email protected]';
  $scope.emailFormat = /^[a-z]+[a-z0-9._]+@[a-z]+\.[a-z.]{2,5}$/;
}
</script>
<form name="myForm" ng-controller="Ctrl">
  Email: <input type="email" name="input" ng-model="text" ng-pattern="emailFormat" required>
  <br/><br/>
  <span class="error" ng-show="myForm.input.$error.required">
    Required!
  </span><br/>
  <span class="error" ng-show="myForm.input.$error.pattern">
    Not valid email!
  </span>
  <br><br>
  <tt>text = {{text}}</tt><br/>
  <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
  <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
  <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
  <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
  <tt>myForm.$error.pattern = {{!!myForm.$error.pattern}}</tt><br/>
</form>

Plunker: https://plnkr.co/edit/e4imaxX6rTF6jfWbp7mQ?p=preview

User · Answer

You can use ng-messages    lt script src  http   ajax googleapis com ajax libs angularjs 1 5 3 angular-messages min js  gt  lt  script gt    include the module   angular module  blank    ngMessages     in html   lt input type  email  name  email  class  form-control  placeholder  email  ng-model  email  required gt   lt div ng-messages  myForm email  error  gt   lt div ng-message  required  gt This field is required lt  div gt   lt div ng-message  email  gt Your email address is invalid lt  div gt   lt  div gt

User · Answer

This is jQuery Email Validation using Regex Expression  you can also use the same concept for AngularJS if you have idea of AngularJS   var expression       w -         a-zA-Z0-9   -     a-zA-z0-9  2 4       Source

User · Answer

Now  Angular 4 has email validator built-in https   github com angular angular blob master CHANGELOG md features-6 https   github com angular angular pull 13709  Just add email to the  tag  For example     lt form  f  ngForm  gt       lt input type  email  ngModel name  email  required email gt       lt button  disabled    f valid  gt Submit lt  button gt       lt p gt Form State    f valid  VALID   INVALID    lt  p gt     lt  form gt

User · Answer

I tried  Joanna s method and tested on the following websites and it didn t work    https   regex101 com  https   www regextester com  https   regexr com    I then modified it to and it worked       w-         w-            w-       w  w-  0 66      a-z  2 6       a-z  2     S

User · Answer

According to the answer of  scx  I created a validation for GUI  app directive  validateEmail   function       var EMAIL REGEXP       a-z0-9       a-z0-9      a-z0-9-      a-z0-9-        a-z  2 4        return       link  function scope  elm          elm on  keyup  function                var isMatchRegex   EMAIL REGEXP test elm val                 if  isMatchRegex amp  amp  elm hasClass  warning      elm val                         elm removeClass  warning                 else if isMatchRegex    false  amp  amp   elm hasClass  warning                   elm addClass  warning                                            And simply add    css   warning     border 1px solid red       html   lt input type  email  validate-email name  email  id  email  ng-model  email  required gt

User · Answer

angularjs controller way  just an example to look for one or more email in the body of a message   sp    scope messagebody     email message body  if  sp    null  amp  amp  sp match     w-         w-            w-       w  w-  0 66      a-z  2 6       a-z  2     S          console log  Error  You are not allowed to have an email in the message body

User · Answer

Spend some time to make it working for me   Requirement    single or comma separated list of e-mails with domains ending name surname gmail com or team-email list gmail com  Controller     scope email        EMAIL FORMAT      w     -   w     list   gmail com    s      s    w     -   w     list   gmail com         EMAIL FORMAT HELP   format as  your name gmail com  or comma separated  your name gmail com  my name list gmail com        HTML    lt ng-form name  emailModal  gt       lt div class  form-group row mb-3  gt           lt label for  to  class  col-sm-2 text-right col-form-label  gt               lt span class  form-required  gt   lt  span gt              To          lt  label gt           lt div class  col-sm-9  gt               lt input class  form-control  id  to                     name  To                     ng-required  true                     ng-pattern  email EMAIL FORMAT                     placeholder    email EMAIL FORMAT HELP                       ng-model  mail to   gt               lt small class  text-muted  ng-show  emailModal To  error pattern  gt wrong lt  small gt           lt  div gt       lt  div gt   lt  ng-form gt    I found good online regex testing tool  Covered my regex with tests   https   regex101 com r Dg2iAZ 6 tests

User · Answer

Below is the fully qualified pattern for email validation    lt input type  text  pattern      a-z0-9       a-z0-9      a-z0-9-      a-z  2 4      ng-model  emailid  name  emailid   gt    lt div ng-message  pattern  gt Please enter valid email address lt  div gt

User · Answer

There is nice example how to deal with this kind of problem modyfing built-in validators angulardocs  I have only added more strict validation pattern   app directive  validateEmail   function       var EMAIL REGEXP       a-z0-9       a-z0-9      a-z0-9-      a-z0-9-        a-z  2 4         return       require   ngModel       restrict          link  function scope  elm  attrs  ctrl             only apply the validator if ngModel is present and Angular has added the email validator       if  ctrl  amp  amp  ctrl  validators email                this will overwrite the default Angular email validator         ctrl  validators email   function modelValue              return ctrl  isEmpty modelValue     EMAIL REGEXP test modelValue                                       And simply add   lt input type  email  validate-email name  email  id  email  ng-model  email  required gt

User · Answer

Use below regular expression       0-9a-z-     0-9a-z  0-9a-z-          a-z  2        It allows  test test com test test co in test test gov us test test net test test software

User · Answer

I have tried wit the below regex it is working fine   Email validation    w   -     w    w   -   w    w   -   w

[regex] How to validate email id in angularJs using ng-pattern

Examples related to regex

Examples related to angularjs

Examples related to email

Examples related to angularjs-directive

Examples related to ng-pattern