Validation Example

<!DOCTYPE html>
<html ng-app="validation-example">
  
  <head lang="en">
    <meta charset="utf-8">
    <title>Validation Example Plunker</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script>
      document.write('<base href="' + document.location + '" />');
    </script>
    <script src="app.js"></script>
  </head>
  
  <body ng-controller="MainCtrl">
    <h1>Welcome</h1>
    <div>This is a simple form validation example.</div>
    <div class="example">
      <form name="form" novalidate>
        <span class="label">Name:</span> <input type="text" ng-model="user.name" name="username" required />
        <span class="errorText" ng-show="form.username.$error.required">Required</span>
        <span class="passText" ng-show="!form.username.$error.required">&#10003;</span>
        <br />
        <span class="label">E-mail:</span> <input type="email" ng-model="user.email" name="useremail" required/>
        <span class="errorText" ng-show="form.useremail.$error.required">Required</span>
        <span class="errorText" ng-show="form.useremail.$error.email">Not a valid email</span>
        <span class="passText" ng-show="!form.useremail.$error.required && !form.useremail.$error.email">&#10003;</span>
        <br/>
        <button ng-click="addUser(user)"
                ng-disabled="form.$invalid || isDuplicate(user)">ADD</button>
      </form>
      <div>
        <h4>Registered Personnel</h4>
        <ul>
          <li ng-show="!users.length" class="user">No Personnel</li>
          <li ng-repeat="storedUser in users" class="user">
            {{storedUser.name}} ---
            {{storedUser.email}}
            <button ng-click="removeUser(storedUser)">Remove</button>
          </li>
        </ul>
      </div>
    </div>
  </body>

</html>

var app = angular.module('validation-example', []);

app.controller('MainCtrl', function($scope, UserService) {
  $scope.users = UserService.getAllUsers();
  $scope.user = {};
 
  $scope.addUser = function(user) {
    UserService.addUser(user);
    $scope.user = {};
  };
 
  $scope.isDuplicate = function(user) {
    var found = false;
    
    angular.forEach($scope.users, function(currentUser) {
      found = angular.equals(currentUser, user);
      if (found) {
        return found;
      }
    });
  
    return found;
  };
  
  $scope.removeUser = function(user) {
    UserService.removeUser(user);
  };
});


// The Service
app.factory('UserService', function() {
  var UserService = {};
  var users = [];
  UserService.getUser = function(index) { 
    return users[index];
  };
  UserService.addUser = function(user) {
    users.push(user);
  };
  UserService.removeUser = function(user) {
    users.splice(users.indexOf(user), 1);
  };
  UserService.size = function() { 
    return users.length;
  };
  UserService.getAllUsers = function() {
    return users;
  };

  return UserService;
});

/* CSS goes here */

.example {
  background: #f5f5f5;
  border: 1px solid rgba(0, 0, 0, 0.05);
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .3);
  padding: 10px;
  margin: 5px;
}

.example input, textarea {
  -webkit-box-shadow: inset 0 5px 5px rgba(0, 0, 0, 0.075);
  -moz-box-shadow: inset 0 5px 5px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 5px 5px rgba(0, 0, 0, 0.075);
  -webkit-transition: border linear 0.2s,box-shadow linear 0.2s;
  -moz-transition: border linear 0.2s,box-shadow linear 0.2s;
  -ms-transition: border linear 0.2s,box-shadow linear 0.2s;
  -o-transition: border linear 0.2s,box-shadow linear 0.2s;
  transition: border linear 0.2s,box-shadow linear 0.2s;
  color: #555555;
  border: 1px solid #cccccc;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.label {
  width: 50px;
  display: inline-block;
}

ul {
  list-style:none;
}

form input.ng-invalid {
  border-color: #bd1a00;
  box-shadow: inset 0 5px 5px rgba(0, 0, 0, 0.075);
}

form input.ng-valid.ng-dirty {
  background-color: #78FA89;
}

.errorText {
  color: #bd1a00;
}

.passText {
  color: green;
}