<!DOCTYPE html>
<html ng-app="angularjs-starter">
<head lang="en">
<meta charset="utf-8">
<title>AngularJS server side validation</title>
<script src="//code.angularjs.org/1.1.1/angular.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">
<form name="Article" qn:validate="errors"><!-- <<< Here is our validation directive -->
<div ng:show="Article.$serverInvalid" class="validation-summary">
<p>Something is wrong here</p>
</div>
<div class="control-group">
<label>Email</label>
<div class="controls">
<input type="email" name="Email" ng:model="article.Email" />
<span class="validation-error" ng:show="Article.$serverError.DuplicateEmail.$invalid">
Email you have entered already exists.
</span>
</div>
<label>User</label>
<div class="controls">
<input type="text" name="User" ng:model="article.User" />
<span class="validation-error" ng:show="Article.$serverError.DuplicateUser.$invalid">
{{Article.$serverError.DuplicateUser.message}}
</span>
</div>
</div>
<div class="control-group">
<div class="controls">
<button ng:click="submit()" ng:disabled="Article.$invalid" class="btn btn-success">Invalid email</button>
<button ng:click="submit2()" ng:disabled="Article.$invalid" class="btn btn-success">Invalid all</button>
<button ng:click="submit3()" ng:disabled="Article.$invalid" class="btn btn-success">Invalid nothing</button>
</div>
</div>
</for>
</body>
</html>
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.submit = function() {
// NOTE: Usually you would take these errors from server via callback or than
// This is just sample so we are just setting $scope.errors property
$scope.errors = [{ key: 'DuplicateEmail', value: 'Duplicate email address' }];
};
$scope.submit2 = function() {
// NOTE: Usually you would take these errors from server via callback or than
// This is just sample so we are just setting $scope.errors property
$scope.errors = [
{ key: 'DuplicateUser', value: 'Duplicate user name' },
{ key: 'DuplicateEmail', value: 'Duplicate email address' }
];
};
$scope.submit3 = function() {
// NOTE: Usually you would take these errors from server via callback or than
// This is just sample so we are just setting $scope.errors property
$scope.errors = null;
};
});
// this is our directive
app.directive('qnValidate', [
function() {
return {
link: function(scope, element, attr) {
var form = element.inheritedData('$formController');
// no need to validate if form doesn't exists
if (!form) return;
// validation model
var validate = attr.qnValidate;
// watch validate changes to display validation
scope.$watch(validate, function(errors) {
// every server validation should reset others
// note that this is form level and NOT field level validation
form.$serverError = { };
// if errors is undefined or null just set invalid to false and return
if (!errors) {
form.$serverInvalid = false;
return;
}
// set $serverInvalid to true|false
form.$serverInvalid = (errors.length > 0);
// loop through errors
angular.forEach(errors, function(error, i) {
form.$serverError[error.key] = { $invalid: true, message: error.value };
});
});
}
};
}
]);
/* CSS goes here */
.validation-error ,
.validation-summary
{
color: #B94A48;
}