AngularJS - Email Validation

by apimenov93

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.0.js"></script>
<div class="container" ng-app="demoApp" ng-controller="demoController">
  <div id="registerEmployerForm" name="registerEmployerForm" ng-form="registerEmployerForm" novalidate>
    <div class="row">
      <div class="col-md-6">
        <input type="text" placeholder="Email" ng-model="Employer.Email" ng-pattern="emailPattern" class="form-control" name="email" required />
        <p ng-show="showMessages && registerEmployerForm.email.$error.required" class="text-danger">
          Email is required.
        </p>
        <p ng-show="showMessages && !registerEmployerForm.email.$error.required && registerEmployerForm.email.$error.pattern" class="text-danger">
          Email is invalid.
        </p>
      </div>
    <div class="col-md-6">
      <button class="btn-primary btn-xs add" ng-click="RegisterEmployer(registerEmployerForm)">Add</button>
    </div>
  </div>
</div>
</div>

CSS

.row {
  border: 1px solid #ccc;
  border-radius: 2px;
  padding: 10px;
  margin-bottom: 5px;
}

JavaScript

var demoApp = angular.module('demoApp', []);

// create angular controller
demoApp.controller("demoController", ["$scope",
  function($scope) {
  	$scope.showMessages = true;
    $scope.Employer = {
      "Email": ""
    };
    $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,}))$/igm;
    $scope.RegisterEmployer = function(myForm) {
    	console.log(myForm)
    };
  }
]);