Using ng-pattern to validate email in AngularJS

Question

I'm new to Angular and have trouble getting the ng-pattern to validate the email address based on a REGEX. In fact the other default angular validation for email also changes behaviour and only shows an error if the entire field is empty when I insert ng-pattern. Initially tried using directives and controllers but found that the ng-pattern can achieve (in theory) the same effect of validating the email so decided to use this.

I have used several REGEX patterns and read about ng-pattern such as from: Regex validation of ng-pattern Form validation Easy form validation and many other links but nothing works. Can anybody figure-out what I need to do to make things work ?

  <form name="userForm" novalidate>
    <div class="row">
                    <div class="large-12 medium-12 small-12 columns">
                        <label>Username</label>
                            <input type="email" name="username" placeholder="[email protected]" ng-model="user.username" ng-maxlength="100" ng-model-options="{ updateOn: blur }" ng-pattern = "/^(?("")("".+?(?<!\)""@)|(([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]))$/" required />
                            <div class="error-container" ng-show="userForm.username.$dirty && userForm.username.$invalid">
                              <small class="error" ng-show="userForm.username.$error.required">
                                     Your email is required.
                              </small>
                              <small class="error" ng-show="userForm.username.$error.email">
                                     Please input a valid email.
                              </small>
                              <small class="error" ng-show="userForm.firstname.$error.maxlength">
                                    Your email cannot be longer than 100 characters
                              </small>                        
                            </div>
                    </div>
</form>

Thanks but read that too. I would really prefer to know how to make it work with ng-pattern since it is supposed to add the same functionality but much easier. In your case I would have to add the function to a controller or directive and and and — Afshin Ghazi
– Afshin Ghazi, Commented Feb 11, 2016 at 6:09
As you can see in my code I am already using this (html email validation) but, adding (for example) ".." or leaving a section of the email after the "@" blank does not show an error. — Afshin Ghazi
– Afshin Ghazi, Commented Feb 11, 2016 at 6:12

ashfaq.p · Accepted Answer · 2016-02-11 07:33:27Z

9

Please change your ng-pattern to match this regex:

ng-pattern = '/^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i'

This regex will give error if the section after @ is left blank. This regex will accept unicode also.

Hope it helps.

edited Feb 11, 2016 at 7:33

answered Feb 11, 2016 at 6:24

ashfaq.p

5,49723 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Afshin Ghazi Over a year ago

Your regex has an error. I think you haven't escaped one of your characters .

Afshin Ghazi Over a year ago

Was bse of not adding single quotes instead of double. Will accept your answer because it also works.

Narendra CM · Accepted Answer · 2016-02-11 06:15:58Z

2

There is an error with you regular expression. I used this simple email validator and it worked fine with few changes to display proper errors

<div class="row">
  <div class="large-12 medium-12 small-12 columns">
      <label>Username</label>
          <input type="email" name="username" placeholder="[email protected]" ng-model="user.username" ng-maxlength="100" ng-model-options="{ updateOn: blur }" ng-pattern="/^[a-z]+[a-z0-9._]+@[a-z]+\.[a-z.]{2,5}$/" required />
          <div class="error-container" ng-show="userForm.username.$dirty && userForm.username.$error"> 
            <small class="error" ng-show="userForm.username.$error.required">
                   Your email is required.
            </small>
            <small class="error" ng-show="userForm.username.$error.pattern">
                   Please input a valid email.
            </small>
            <small class="error" ng-show="userForm.username.$error.maxlength">
                  Your email cannot be longer than 100 characters
            </small>                        
          </div>
  </div>
</div>

answered Feb 11, 2016 at 6:15

Narendra CM

1,4263 gold badges13 silver badges23 bronze badges

1 Comment

Afshin Ghazi Over a year ago

Thanks for the answer. I had tried many different regex but hadn't managed to make it work. With yours the functionality improved but ".." (more than one subsequent dot) still no catered for and, a dash is not allowed in the email as per your regex.

Afshin Ghazi · Accepted Answer · 2016-02-11 07:14:04Z

2

The problem was in my regex. I ended up using: ng-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,}))$/' required />

answered Feb 11, 2016 at 7:14

Afshin Ghazi

3,0184 gold badges28 silver badges40 bronze badges

Collectives™ on Stack Overflow

Using ng-pattern to validate email in AngularJS

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related