Skip to content

Instantly share code, notes, and snippets.

@jtreuting

jtreuting/basic example.html

Last active August 29, 2015 14:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jtreuting/11312212 to your computer and use it in GitHub Desktop.
Save jtreuting/11312212 to your computer and use it in GitHub Desktop.
Download ZIP
AngularJS validation error message examples
Raw
basic example.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<style>
input.ng-invalid, select.ng-invalid {
color: #d43f3a;
border-color: #d43f3a !important;
}
.error-message {
color: #d43f3a;
}
</style>
</head>
<body>
<div ng-app="validationApp" ng-controller="mainController">
<div class="container">
<div class="row">
<div class="col-sm-12">
<form name="userForm" ng-submit="submitForm()" novalidate>
<!-- NAME -->
<div class="form-group">
<label>Name</label>
<input type="text" name="name" class="form-control" ng-model="user.name" required>
<p ng-show="userForm.name.$error.required" class="error-message">Your name is required.</p>
</div>
<!-- USERNAME -->
<div class="form-group">
<label>Username</label>
<input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8" required>
<p ng-show="userForm.username.$error.required" class="error-message">Username is required.</p>
<p ng-show="userForm.username.$error.minlength" class="error-message">Username is too short.</p>
<p ng-show="userForm.username.$error.maxlength" class="error-message">Username is too long.</p>
</div>
<!-- EMAIL -->
<div class="form-group">
<label>Email</label>
<input type="email" name="email" class="form-control" ng-model="user.email" required>
<p ng-show="userForm.email.$error.required" class="error-message">Your email is required.</p>
<p ng-show="userForm.email.$error.email" class="error-message">Your email is invalid.</p>
</div>
<button type="submit" class="btn btn-primary" ng-disabled="userForm.$invalid">Submit</button>
</form>
</div>
</div>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.15/angular.js"></script>
<script type="text/javascript">
// create angular app
var validationApp = angular.module('validationApp', []);
// create angular controller
validationApp.controller('mainController', function ($scope) {
// function to submit the form after all validation has occurred
$scope.submitForm = function () {
// check to make sure the form is completely valid
if ($scope.userForm.$valid) {
alert('our form is amazing');
}
};
});
;
</script>
</body>
</html>
Raw
custom validationFor directive.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<style>
input.ng-invalid, select.ng-invalid {
color: #d43f3a;
border-color: #d43f3a !important;
}
.error-message {
color: #d43f3a;
}
</style>
</head>
<body>
<div ng-app="validationApp" ng-controller="mainController">
<div class="container">
<div class="row">
<div class="col-sm-12">
<form name="userForm" ng-submit="submitForm()" novalidate>
<!-- NAME -->
<div class="form-group">
<label>Name</label>
<input type="text" name="name" class="form-control" ng-model="user.name" required>
<div validation-for="userForm.name"></div>
</div>
<!-- USERNAME -->
<div class="form-group">
<label>Username</label>
<input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8" required>
<div validation-for="userForm.username" maxlength-message="Username is too long."></div>
</div>
<!-- EMAIL -->
<div class="form-group">
<label>Email</label>
<input type="email" name="email" class="form-control" ng-model="user.email" required>
<div validation-for="userForm.email"></div>
</div>
<button type="submit" class="btn btn-primary" ng-disabled="userForm.$invalid">Submit</button>
</form>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.15/angular.js"></script>
<script type="text/javascript">
// create angular app
var validationApp = angular.module('validationApp', []);
// create angular controller
validationApp.controller('mainController', function ($scope) {
// function to submit the form after all validation has occurred
$scope.submitForm = function () {
// check to make sure the form is completely valid
if ($scope.userForm.$valid) {
alert('our form is amazing');
}
};
});
validationApp.directive('validationFor', function () {
var getAttributeValue = function (field, attributeName) {
var el = angular.element('input[name="' + field.$name + '"]')[0];
var val = '';
if (el) {
val = el.attributes[attributeName].value;
}
return val;
};
var getErrorMessage = function (type, attrs, field) {
var msg = attrs[type + 'Message'];
if (msg) return msg;
// default messages if user didn't define one
switch (type) {
case 'required':
return 'Required';
case 'email':
return 'Invalid email';
case 'min':
return 'Number cannot be less than ' + getAttributeValue(field, 'min');
case 'max':
return 'Number cannot be greater than ' + getAttributeValue(field, 'max');
case 'minlength':
return 'Minimum of ' + getAttributeValue(field, 'ng-minlength') + ' characters required';
case 'maxlength':
return 'Maximum of ' + getAttributeValue(field, 'ng-maxlength') + ' characters allowed';
case 'number':
return 'Invalid number';
}
return 'Invalid field';
};
return {
restrict: 'A',
scope: {
validationFor: '='
},
templateUrl: '/validation.tpl.html',
controller: ['$scope', function ($scope) {
$scope.clientSideValidations = [];
$scope.isGeneralError = false;
if (typeof $scope.validationFor == 'undefined') {
$scope.isGeneralError = true;
}
$scope.isInvalidField = function () {
return $scope.validationFor.$invalid;
};
$scope.isInvalidRule = function (type) {
if (typeof $scope.validationFor == 'undefined') return false;
return $scope.validationFor.$error[type];
};
}],
link: function (scope, el, attrs, ctrl) {
// for general error messages the validationFor object is undefined since it's not attached to a specific input field
if (scope.isGeneralError) return;
for (var err in scope.validationFor.$error) {
scope.clientSideValidations.push({
type: err,
message: getErrorMessage(err, attrs, scope.validationFor)
});
}
}
};
})
;
</script>
</body>
</html>
Raw
validation.tpl.html
<div class="error-message">
<div ng-repeat="validation in clientSideValidations" ng-show="isInvalidRule(validation.type)">{{ validation.message }}</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment