<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js@*" data-semver="1.4.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="AppController">
<form name="theForm" ng-submit="theForm.$valid && save()" novalidate>
<div class="form-group" ng-class="{'error': theForm.$submitted && theForm.email.$invalid, 'success' : theForm.email.$valid }">
<div class="form-item-label">Email</div>
<div class="form-item-feedback-error">Invalid email</div>
<input type="email" name="email" ng-model="email" required>
</div>
<div class="form-group" ng-class="{'error': theForm.$submitted && theForm.password.$invalid, 'success' : theForm.password.$valid }">
<div class="form-item-label">Password</div>
<div class="form-item-feedback-error">Required password</div>
<input type="password" name="password" ng-model="password" required>
</div>
<button type="submit">Submit</button>
</form>
</body>
</html>
// Code goes here
angular.module('app', []).
controller('AppController', ['$scope', function($scope) {
$scope.save = function() {
alert("Is valid and will be saved!!!");
};
}]);
/* Styles go here */
.form-group .form-item-feedback-error {
display: none;
}
.form-group.error .form-item-feedback-error {
display: block;
background-color: red;
color: white;
}
.form-group.success input {
border: solid 3px green;
}