Email Address Validation

Angular email address validation

by wholypantalones

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div ng-app="ctrl" ng-controller="mindCtrl">
  <form name="createAccountForm" novalidate>
    <div class="form-group" ng-class="{true: 'has-error'}[!createAccountForm.emailAddress.$pristine && createAccountForm.emailAddress.$invalid]">
      <label class="control-label" for="user-email">Email</label>
      <input class="form-control" type="email" id="user-email" name="emailAddress" ng-model="createFields.emailAddress" ng-pattern="/^[_a-zA-Z0-9]+(\.[_a-zA-Z0-9]+)*@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*(\.[a-zA-Z]{2,4})$/" required />
      <span class="help-block" ng-show="!createAccountForm.emailAddress.$pristine && createAccountForm.emailAddress.$invalid">A valid email address is required</span>
    </div>
  </form>
</div>

CSS

body {padding:20px}

JavaScript

angular.module("ctrl", []).controller("mindCtrl", function($scope) {
	$scope.createFields = {
  	emailAddress: '[email protected]'
  }
});