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 · 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

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

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    lt script gt  function Ctrl  scope       scope text    me example com      lt  script gt   lt form name  myForm  ng-controller  Ctrl  gt    Email   lt input type  email  name  input  ng-model  text  required gt     lt br  gt     lt span class  error  ng-show  myForm input  error required  gt      Required  lt  span gt     lt span class  error  ng-show  myForm input  error email  gt      Not valid email  lt  span gt     lt br gt     lt tt gt text     text   lt  tt gt  lt br  gt     lt tt gt myForm input  valid     myForm input  valid   lt  tt gt  lt br  gt     lt tt gt myForm input  error     myForm input  error   lt  tt gt  lt br  gt     lt tt gt myForm  valid     myForm  valid   lt  tt gt  lt br  gt     lt tt gt myForm  error required       myForm  error required   lt  tt gt  lt br  gt     lt tt gt myForm  error email       myForm  error email   lt  tt gt  lt br  gt   lt  form gt    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    lt script gt  function Ctrl  scope       scope text    me example com      scope emailFormat      a-z   a-z0-9      a-z     a-z   2 5        lt  script gt   lt form name  myForm  ng-controller  Ctrl  gt    Email   lt input type  email  name  input  ng-model  text  ng-pattern  emailFormat  required gt     lt br  gt  lt br  gt     lt span class  error  ng-show  myForm input  error required  gt      Required     lt  span gt  lt br  gt     lt span class  error  ng-show  myForm input  error pattern  gt      Not valid email     lt  span gt     lt br gt  lt br gt     lt tt gt text     text   lt  tt gt  lt br  gt     lt tt gt myForm input  valid     myForm input  valid   lt  tt gt  lt br  gt     lt tt gt myForm input  error     myForm input  error   lt  tt gt  lt br  gt     lt tt gt myForm  valid     myForm  valid   lt  tt gt  lt br  gt     lt tt gt myForm  error required       myForm  error required   lt  tt gt  lt br  gt     lt tt gt myForm  error pattern       myForm  error pattern   lt  tt gt  lt br  gt   lt  form gt    Plunker  https   plnkr co edit e4imaxX6rTF6jfWbp7mQ p preview

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

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

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

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

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

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

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

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

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