Email validation not working in angularjs?

Question

this is my input

[email protected]

hyphen is not working in emailid getting invalid email id this is my ng-pattern

<div class="form-group">
    <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
        <input class="form-control" type="email" id="email" name="email" placeholder="Enter Email" ng-model="user.email" ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" noncapitalize required />
    </div>
    <div style="color: red" id="emailError"></div>
    <span style="color:red;" class="email-error" ng-show="loginForm.submitted && loginForm.email.$error.required">Required</span>
    <span style="color:red" class="error" ng-show="loginForm.submitted && loginForm.email.$error.pattern">Email not valid</span>
</div>

You can remove the ng-pattern if you don't really need it. HTMLs type="email" should be sufficient, shouldn't it ? — vader
– vader, Commented Feb 25, 2017 at 6:05
you need a regExp to validate an email, or you need the particular regExp in your question. bcoz you seems to have an issue with your regex — Sravan
– Sravan, Commented Feb 25, 2017 at 6:24
@Sravan i need a regExp to validate an email not a particular one thanks — Arav KT
– Arav KT, Commented Feb 25, 2017 at 6:27

Sravan · Accepted Answer · 2017-02-25 06:29:49Z

2

Here is a regexp for email validation.

^[\w-]+(\.[\w-]+)*@([a-z0-9-]+(\.[a-z0-9-]+)*?\.[a-z]{2,6}|(\d{1,3}\.){3}\d{1,3})(:\d{4})?$

You can test this regexp here

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
<body ng-app="">

<p>Try writing in the input field:</p>

<form name="myForm">
<div class="form-group">
    <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
        <input class="form-control" type="text" id="email" name="email" placeholder="Enter Email" ng-model="user.email" ng-pattern="/^[\w-]+(\.[\w-]+)*@([a-z0-9-]+(\.[a-z0-9-]+)*?\.[a-z]{2,6}|(\d{1,3}\.){3}\d{1,3})(:\d{4})?$/" noncapitalize required />
    </div>
    <div style="color: red" id="emailError"></div>
    <span style="color:red;" class="email-error" ng-show="myForm.email.$error.required">Required</span>
    <span style="color:red" class="error" ng-show="myForm.email.$error.pattern">Email not valid</span>
</div>
</form>


</body>
</html>

PLEASE RUN THE ABOVE SNIPPET

Here is a working DEMO

answered Feb 25, 2017 at 6:29

Sravan

18.7k3 gold badges33 silver badges54 bronze badges

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

1 Comment

Sravan Over a year ago

Glad to help you. :)

Gaurav · Accepted Answer · 2017-02-25 06:55:06Z

I guess you don't want to allow '-' to be in the email address, here is what I got using ng-pattern and if you want '-' to be allowed check 2nd example:

1) If '-' is not allowed:

angular.module('myApp', [])
  .controller('MyController', function($scope) {
    $scope.user = {
      email: '[email protected]'
    };

    $scope.emailPattern = /^(([^-<>()\[\]\\.,;:\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,}))$/;
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>

<div ng-app="myApp" ng-controller="MyController">

  <form name="loginForm">
    <div class="form-group">
      <div class="input-group">
        <input class="form-control" id="email" name="email" placeholder="Enter Email" ng-model="user.email" ng-pattern="emailPattern" noncapitalize required />
      </div>
      <div style="color: red" id="emailError">
        <span style="color:red;" class="email-error" ng-show="loginForm.email.$error.required">Required</span>
        <span style="color:red" class="error" ng-show="loginForm.email.$error.pattern">Email not valid, doesn't match the provided pattern</span>
      </div>
    </div>
  </form>

</div>

2) If '-' is allowed:

angular.module('myApp', [])
  .controller('MyController', function($scope) {
    $scope.user = {
      email: '[email protected]'
    };

    $scope.emailPattern = /^(([^<>()\[\]\\.,;:\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,}))$/;
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>

<div ng-app="myApp" ng-controller="MyController">

  <form name="loginForm">
    <div class="form-group">
      <div class="input-group">
        <input class="form-control" id="email" name="email" placeholder="Enter Email" ng-model="user.email" ng-pattern="emailPattern" noncapitalize required />
      </div>
      <div style="color: red" id="emailError">
        <span style="color:red;" class="email-error" ng-show="loginForm.email.$error.required">Required</span>
        <span style="color:red" class="error" ng-show="loginForm.email.$error.pattern">Email not valid, doesn't match the provided pattern</span>
      </div>
    </div>
  </form>

</div>

Collectives™ on Stack Overflow

Email validation not working in angularjs?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related