diff --git a/views/ngXosLib/xosHelpers/spec/ui/validaiton.test.js b/views/ngXosLib/xosHelpers/spec/ui/validaiton.test.js
deleted file mode 100644
index acb7505..0000000
--- a/views/ngXosLib/xosHelpers/spec/ui/validaiton.test.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * © OpenCORD
- *
- * Created by teone on 4/15/16.
- */
-
-(function () {
-  'use strict';
-
-  describe('The xos.helper module', function(){
-    describe('The xos-validation component', () => {
-
-      let element, scope, isolatedScope;
-
-      beforeEach(module('xos.helpers'));
-
-      beforeEach(inject(($compile, $rootScope) => {
-
-        scope = $rootScope.$new();
-
-        scope.errors = {};
-
-        element = angular.element(`<xos-validation errors="errors"></xos-validation>`);
-        $compile(element)(scope);
-        scope.$digest();
-        isolatedScope = element.isolateScope().vm;
-      }));
-
-      it('should not show an alert', () => {
-        expect($(element).find('xos-alert > .alert')[0]).toHaveClass('ng-hide');
-      });
-
-      it('should show an alert', () => {
-        scope.errors.email = true;
-        scope.$digest();
-        expect($(element).find('xos-alert > .alert')[0]).not.toHaveClass('ng-hide');
-      });
-    });
-  });
-})();
\ No newline at end of file
diff --git a/views/ngXosLib/xosHelpers/spec/ui/validation.test.js b/views/ngXosLib/xosHelpers/spec/ui/validation.test.js
new file mode 100644
index 0000000..eb92a05
--- /dev/null
+++ b/views/ngXosLib/xosHelpers/spec/ui/validation.test.js
@@ -0,0 +1,64 @@
+/**
+ * © OpenCORD
+ *
+ * Created by teone on 4/15/16.
+ */
+
+(function () {
+  'use strict';
+
+  describe('The xos.helper module', function(){
+    describe('The xos-validation component', () => {
+
+      let element, scope, isolatedScope;
+
+      beforeEach(module('xos.helpers'));
+
+      beforeEach(inject(($compile, $rootScope) => {
+
+        scope = $rootScope.$new();
+
+        scope.errors = {};
+
+        element = angular.element(`<xos-validation errors="errors"></xos-validation>`);
+        $compile(element)(scope);
+        scope.$digest();
+        isolatedScope = element.isolateScope().vm;
+      }));
+
+      it('should not show an alert', () => {
+        expect($(element).find('xos-alert > .alert')[0]).toHaveClass('ng-hide');
+      });
+
+      let availableErrors = [
+        {
+          type: 'email',
+          message: 'This is not a valid email'
+        },
+        {
+          type: 'minlength',
+          message: 'Too short'
+        },
+        {
+          type: 'maxlength',
+          message: 'Too long'
+        },
+        {
+          type: 'custom',
+          message: 'Field invalid'
+        },
+      ];
+
+      // use a loop to generate similar test
+      availableErrors.forEach((e, i) => {
+        it(`should show an alert for ${e.type} errors`, () => {
+          scope.errors[e.type] = true;
+          scope.$digest();
+          let alert = $(element).find('xos-alert > .alert')[i];
+          expect(alert).not.toHaveClass('ng-hide');
+          expect(alert).toHaveText(e.message);
+        });
+      });
+    });
+  });
+})();
\ No newline at end of file
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/validation.component.js b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/validation.component.js
index 9e95805..c5ea993 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/validation.component.js
+++ b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/validation.component.js
@@ -19,6 +19,32 @@
     * @param {Object} errors The error object
     * @element ANY
     * @scope
+  * @example
+  <example module="sampleValidation">
+    <file name="index.html">
+      <div ng-controller="SampleCtrl as vm">
+        <div class="row">
+          <div class="col-xs-12">
+            <label>Set an error type:</label>
+          </div>
+          <div class="col-xs-2">
+            <a class="btn" ng-click="vm.errors.email = true" ng-class="{'btn-default': !vm.errors.email, 'btn-success': vm.errors.email}">
+              Email
+            </a>
+          </div>
+        </div>
+        <xos-validation errors="vm.errors"></xos-validation>
+      </div>
+    </file>
+    <file name="script.js">
+      angular.module('sampleValidation', ['xos.uiComponents'])
+      .controller('SampleCtrl', function(){
+        this.errors = {
+          email: false
+        }
+      });
+    </file>
+  </example>
     */
 
   .directive('xosValidation', function(){
@@ -30,9 +56,18 @@
       template: `
         <div>
           <!-- <pre>{{vm.errors.email | json}}</pre> -->
-          <xos-alert config="vm.config" show="vm.errors.email !== undefined">
+          <xos-alert config="vm.config" show="vm.errors.email !== undefined && vm.errors.email !== false">
             This is not a valid email
           </xos-alert>
+          <xos-alert config="vm.config" show="vm.errors.minlength !== undefined && vm.errors.minlength !== false">
+            Too short
+          </xos-alert>
+          <xos-alert config="vm.config" show="vm.errors.maxlength !== undefined && vm.errors.maxlength !== false">
+            Too long
+          </xos-alert>
+          <xos-alert config="vm.config" show="vm.errors.custom !== undefined && vm.errors.custom !== false">
+            Field invalid
+          </xos-alert>
         </div>
       `,
       transclude: true,