Form Validation - Email Validation not working as expected in AngularJs

Question

I am using Angular for form validation.

Here is what I use - plunker-edit I have taken this code from Angularjs documentation - Binding to form and control state Have used type as email but when I run this and enter abc@abc it says it is valid. How do I fix this ?

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example100-production</title>


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.8/angular.min.js"></script>
  <script src="script.js"></script>



</head>
<body ng-app="">
    <div ng-controller="Controller">
    <form name="form" class="css-form" novalidate>
      E-mail:
        <input type="email" ng-model="user.email" name="uEmail" required/><br />
      <div ng-show="form.uEmail.$dirty && form.uEmail.$invalid">Invalid:
        <span ng-show="form.uEmail.$error.required">Tell us your email.</span>
        <span ng-show="form.uEmail.$error.email">This is not a valid email.</span>
      </div>
    </form>
  </div>
</body>
</html>

P.S : I am a beginner in AngularJs

Edit:

Also the following inputs wer also shown valid

aaa@aaa
[email protected]
aaa`aaa@aaa

Expected Valid Emails

abc@abc is as far as I know a valid local domain email address. - and ` are also valid characters in an email address — ivarni
– ivarni, Commented May 15, 2014 at 7:41
Here is the regexp angular is using btw: github.com/angular/angular.js/blob/master/src/ng/directive/… — ivarni
– ivarni, Commented May 15, 2014 at 7:48
check this you can use ng-messages stackoverflow.com/questions/24490668/… — arun-r
– arun-r, Commented Jul 19, 2016 at 15:43

Community · Accepted Answer · 2017-05-23 12:26:25Z

36

Refer to my another answer: AngularJS v1.3.x Email Validation Issue

Try to use ng-pattern in your email input.

<input type="email" name="input" ng-model="text" ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" required>

It fits your valid and invalid cases.

See an example: plunk

edited May 23, 2017 at 12:26

CommunityBot

11 silver badge

answered May 15, 2014 at 8:01

jackypan1989

2,8661 gold badge15 silver badges11 bronze badges

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

6 Comments

Jon Mattingly Over a year ago

This fails if the first letter of the email is capitalized. I.e. [email protected] fails, but [email protected] does not. I used this regex instead - ng-pattern=".{1,}@[_a-z0-9A-Z]+(\.[a-z0-9A-Z]+)+"

Pakk Over a year ago

when i use the ng-pattern at all it gives me "Failed to load template" - any idea why? - copied the code over, no errors before

Don Simon Over a year ago

Weirdly it works fine for me in terms of angular adding the ng-invalid class based on the pattern while the form.input.$error.email property seems to still be set based on the built in email validation. So my styling of the input box works fine but the error message shows up falsly...

Don Simon Over a year ago

Not so weird after all, the email error is for the built in email validation, to use the pattern check "form.input.$error.pattern". Makes sense.

Spadar Shut Over a year ago

Only worked for me when I used pattern instead of ng-pattern

|

Re Captcha · Accepted Answer · 2014-05-15 07:44:28Z

3

These emails are valid, as they can be local emails or to an intranet email server: Domains.

The TLD is not required for local emails. As shown in the Wikipedia example, the domain may even contain an IP Address in place of the domain.

answered May 15, 2014 at 7:44

Re Captcha

3,1332 gold badges27 silver badges35 bronze badges

3 Comments

Yasser Shaikh Over a year ago

In my case user would be entering his/her email address with a tld. How do I validate in that case ?

Re Captcha Over a year ago

@Yasser You could use custom validation in your case, using a custom regex.

Arjun Arora Over a year ago

@ReCaptcha, reference link is worth to read.. At least came to know why angularJs has made a@a a valid email

so-random-dude · Accepted Answer · 2017-04-17 05:44:37Z

2

Even better, now, Angular has email validator built-in, from Angular 4 onwards 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

  <form #f="ngForm">
    <input type="email" ngModel name="email" required email>
    <button [disabled]="!f.valid">Submit</button>
    <p>Form State: {{f.valid?'VALID':'INVALID'}}</p>
  </form>

answered Apr 17, 2017 at 5:44

so-random-dude

16.8k11 gold badges78 silver badges120 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:10:30Z

As ReCaptcha suggested I ended up creating a custom validation directive

var app = angular.module('login-form', []);
var INTEGER_REGEXP = new RegExp('^[a-z0-9]+(\.[_a-z0-9]+)*@@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,50})$', 'i');
app.directive('cemail', function () {
    return {
        require: 'ngModel',
        link: function (scope, elm, attrs, ctrl) {
            ctrl.$parsers.unshift(function (viewValue) {
                if (INTEGER_REGEXP.test(viewValue)) {
                    // it is valid
                    ctrl.$setValidity('cemail', true);
                    return viewValue;
                } else {
                    // it is invalid, return undefined (no model update)
                    ctrl.$setValidity('cemail', false);
                    return undefined;
                }
            });
        }
    };
});

and in html

<label>Email</label>
<input id="UserName" name="UserName" type="text" value="" data-ng-model="email" required="" cemail>
<span data-ng-show="form.UserName.$dirty && form.UserName.$invalid">
    <span data-ng-show="form.UserName.$error.required">Required</span>
    <span data-ng-show="form.UserName.$error.cemail">Invalid Email</span>
</span>

dball · Accepted Answer · 2015-04-03 18:07:30Z

I have written a directive that uses the same email validation regular expression that ASP.Net uses. While this may not cover 100% of scenarios, it will cover the vast majority and works perfectly for what we need to cover.

function email() {
return {
    restrict: 'A',
    require: 'ngModel',
    link: function (scope, elem, attrs, ctrl) {
        if (!ctrl) {
            return false;
        }

        function isValidEmail(value) {
            if (!value) {
                return false;
            }
            // Email Regex used by ASP.Net MVC
            var regex = /^[\w-]+(\.[\w-]+)*@([a-z0-9-]+(\.[a-z0-9-]+)*?\.[a-z]{2,6}|(\d{1,3}\.){3}\d{1,3})(:\d{4})?$/i;
            return regex.exec(value) != null;
        }

        scope.$watch(ctrl, function () {
            ctrl.$validate();
        });

        ctrl.$validators.email = function (modelValue, viewValue) {
            return isValidEmail(viewValue);
        };
    }
};
}

Use it like this:

<input type="email" ng-model="$scope.emailAddress" name="newEmailAddress" email/>

deepakssn · Accepted Answer · 2018-09-04 06:07:48Z

0

Angular 6

I generally don't want to allow $$$@$$$ format and always expect a TLD (like .com, .net, .org, etc).

In addition to angular email validator I add my regex pattern to make it work.

 <input type="email" name="email" pattern="^\S*[@]\S*[.]\S*$" email required />

pattern="^\S*[@]\S*[.]\S*$" will make sure that there is a @ and a . followed by a string. This will be an addition to Angular's email validation.

answered Sep 4, 2018 at 6:07

deepakssn

5,3832 gold badges29 silver badges19 bronze badges

Collectives™ on Stack Overflow

Form Validation - Email Validation not working as expected in AngularJs

6 Answers 6

6 Comments

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

6 Comments

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related