CODEWITHSUNDEEP
angularjs
Arav KT
Arav KT

Reputation: 301

Email validation not working in angularjs?

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>

Upvotes: 0

Views: 3418

Answers (2)

Gaurav
Gaurav

Reputation: 1233

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>

Upvotes: 1

Sravan
Sravan

Reputation: 18657

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

Upvotes: 2

Related Questions