CODEWITHSUNDEEP
javascripthtmlangularjs
Pedro Henrique Kuzminskas
Pedro Henrique Kuzminskas

Reputation: 193

Validating email address

I need this input informs when the user does not use a valid email address.

takes the form gets red border or a message appears (a hover) next to the field

HTML

<body ng-controller="simulacaoController">
    <input type="text" ng-class="{red: cadastro.$invalid}" ng-model="email" name="email" placeholder="E-Mail" ng-pattern="mascaraEmail" class="last" required />
</body>

AngularJS

angular.module("simulacao", []);
angular.module("simulacao").controller("simulacaoController", function($scope){
    $scope.mascaraEmail = "/^[a-zA-Z0-9][a-zA-Z0-9\._-]+@([a-zA-Z0-9\._-]+\.)[a-zA-Z-0-9]{2,3}/";
});

CSS

.red {
    border: solid 1px red;
}

My code: https://fiddle.jshell.net/kvxcsync/2/

Upvotes: 2

Views: 110

Answers (3)

Joshua Leigh
Joshua Leigh

Reputation: 360

AngularJS has email validation so no need to use ng-pattern for this

<body ng-controller="simulacaoController">
    <form name="myForm">
        <input type="name" ng-class="{red: cadastro.$invalid}" ng-model="text" name="email" placeholder="E-Mail" class="last" required />
<form name="myForm" ng-controller="Ctrl">
      Email: <input type="email" name="input" ng-model="text" required>
      <br>
      <span class="red" ng-show="myForm.email.$error.email">
        Not a valid email!
      </span>
    </form>
    </body>

Reference link

Upvotes: 1

Gopinath Kaliappan
Gopinath Kaliappan

Reputation: 7359

You have to add input type ="email" and add <form></form> Tags for proper form validation 

<body ng-controller="simulacaoController">
  <form>
    <input type="email" ng-class="{red: cadastro.$invalid}" ng-model="email" name="email" placeholder="E-Mail" ng-pattern="mascaraEmail" class="last" required />
    </form>
</body>

Upvotes: -1

TimoStaudinger
TimoStaudinger

Reputation: 42460

You could use the input type email:

<input type="email" ... />

More about input types.

Upvotes: 6

Related Questions