client-side form validation with ng-messages.

remove data prefix from attributes. fix tests
meanjs · Aug 25, 2015 · 8015476 · ilanbiala · Aug 27, 2015 · ilanbiala
1 parent 979c4e5
commit 8015476
Show file tree

Hide file tree

Showing 20 changed files with 274 additions and 106 deletions.
diff --git a/bower.json b/bower.json
@@ -11,7 +11,8 @@
     "angular-bootstrap": "~0.13",
     "angular-ui-utils": "bower",
     "angular-ui-router": "~0.2",
-    "angular-file-upload": "1.1.5"
+    "angular-file-upload": "1.1.5",
+    "angular-messages": "1.3.17"
   },
   "resolutions": {
     "angular": "~1.3"

diff --git a/config/assets/default.js b/config/assets/default.js
@@ -11,6 +11,7 @@ module.exports = {
         'public/lib/angular/angular.js',
         'public/lib/angular-resource/angular-resource.js',
         'public/lib/angular-animate/angular-animate.js',
+        'public/lib/angular-messages/angular-messages.js',
         'public/lib/angular-ui-router/release/angular-ui-router.js',
         'public/lib/angular-ui-utils/ui-utils.js',
         'public/lib/angular-bootstrap/ui-bootstrap-tpls.js',

diff --git a/config/assets/production.js b/config/assets/production.js
@@ -11,6 +11,7 @@ module.exports = {
         'public/lib/angular/angular.min.js',
         'public/lib/angular-resource/angular-resource.min.js',
         'public/lib/angular-animate/angular-animate.min.js',
+        'public/lib/angular-messages/angular-messages.min.js',
         'public/lib/angular-ui-router/release/angular-ui-router.min.js',
         'public/lib/angular-ui-utils/ui-utils.min.js',
         'public/lib/angular-bootstrap/ui-bootstrap-tpls.min.js',

diff --git a/modules/articles/client/controllers/articles.client.controller.js b/modules/articles/client/controllers/articles.client.controller.js
@@ -6,7 +6,15 @@ angular.module('articles').controller('ArticlesController', ['$scope', '$statePa
     $scope.authentication = Authentication;
 
     // Create new Article
-    $scope.create = function () {
+    $scope.create = function (isValid) {
+      $scope.error = null;
+
+      if (!isValid) {
+        $scope.$broadcast('show-errors-check-validity', 'articleForm');
+
+        return false;
+      }
+
       // Create new Article object
       var article = new Articles({
         title: this.title,
@@ -43,7 +51,15 @@ angular.module('articles').controller('ArticlesController', ['$scope', '$statePa
     };
 
     // Update existing Article
-    $scope.update = function () {
+    $scope.update = function (isValid) {
+      $scope.error = null;
+
+      if (!isValid) {
+        $scope.$broadcast('show-errors-check-validity', 'articleForm');
+
+        return false;
+      }
+
       var article = $scope.article;
 
       article.$update(function () {

diff --git a/modules/articles/client/views/create-article.client.view.html b/modules/articles/client/views/create-article.client.view.html
@@ -3,19 +3,18 @@
     <h1>New Article</h1>
   </div>
   <div class="col-md-12">
-    <form name="articleForm" class="form-horizontal" data-ng-submit="create()" novalidate>
+    <form name="articleForm" class="form-horizontal" ng-submit="create(articleForm.$valid)" novalidate>
       <fieldset>
-        <div class="form-group">
-          <label class="control-label" for="title">Title</label>
-          <div class="controls">
-            <input name="title" type="text" data-ng-model="title" id="title" class="form-control" placeholder="Title">
+        <div class="form-group" show-errors>
+          <label for="title">Title</label>
+          <input name="title" type="text" ng-model="title" id="title" class="form-control" placeholder="Title" required>
+          <div ng-messages="articleForm.title.$error" role="alert">
+            <p class="help-block error-text" ng-message="required">Article title is required.</p>
           </div>
         </div>
         <div class="form-group">
-          <label class="control-label" for="content">Content</label>
-          <div class="controls">
-            <textarea name="content" data-ng-model="content" id="content" class="form-control" cols="30" rows="10" placeholder="Content"></textarea>
-          </div>
+          <label for="content">Content</label>
+          <textarea name="content" ng-model="content" id="content" class="form-control" cols="30" rows="10" placeholder="Content"></textarea>
         </div>
         <div class="form-group">
           <input type="submit" class="btn btn-default">

diff --git a/modules/articles/client/views/edit-article.client.view.html b/modules/articles/client/views/edit-article.client.view.html
@@ -3,19 +3,18 @@
     <h1>Edit Article</h1>
   </div>
   <div class="col-md-12">
-    <form name="articleForm" class="form-horizontal" data-ng-submit="update()" novalidate>
+    <form name="articleForm" class="form-horizontal" ng-submit="update(articleForm.$valid)" novalidate>
       <fieldset>
-        <div class="form-group">
-          <label class="control-label" for="title">Title</label>
-          <div class="controls">
-            <input name="title" type="text" data-ng-model="article.title" id="title" class="form-control" placeholder="Title" required>
+        <div class="form-group" show-errors>
+          <label for="title">Title</label>
+          <input name="title" type="text" ng-model="article.title" id="title" class="form-control" placeholder="Title" required>
+          <div ng-messages="articleForm.title.$error" role="alert">
+            <p class="help-block error-text" ng-message="required">Article title is required.</p>
           </div>
         </div>
         <div class="form-group">
-          <label class="control-label" for="content">Content</label>
-          <div class="controls">
-            <textarea name="content" data-ng-model="article.content" id="content" class="form-control" cols="30" rows="10" placeholder="Content"></textarea>
-          </div>
+          <label for="content">Content</label>
+          <textarea name="content" ng-model="article.content" id="content" class="form-control" cols="30" rows="10" placeholder="Content"></textarea>
         </div>
         <div class="form-group">
           <input type="submit" value="Update" class="btn btn-default">

diff --git a/modules/articles/tests/client/articles.client.controller.tests.js b/modules/articles/tests/client/articles.client.controller.tests.js
@@ -97,7 +97,7 @@
       expect(scope.article).toEqualData(mockArticle);
     }));
 
-    describe('$scope.craete()', function () {
+    describe('$scope.create()', function () {
       var sampleArticlePostData;
 
       beforeEach(function () {
@@ -119,7 +119,7 @@
         $httpBackend.expectPOST('api/articles', sampleArticlePostData).respond(mockArticle);
 
         // Run controller functionality
-        scope.create();
+        scope.create(true);
         $httpBackend.flush();
 
         // Test form inputs are reset
@@ -136,7 +136,7 @@
           message: errorMessage
         });
 
-        scope.create();
+        scope.create(true);
         $httpBackend.flush();
 
         expect(scope.error).toBe(errorMessage);
@@ -154,7 +154,7 @@
         $httpBackend.expectPUT(/api\/articles\/([0-9a-fA-F]{24})$/).respond();
 
         // Run controller functionality
-        scope.update();
+        scope.update(true);
         $httpBackend.flush();
 
         // Test URL location to new object
@@ -167,7 +167,7 @@
           message: errorMessage
         });
 
-        scope.update();
+        scope.update(true);
         $httpBackend.flush();
 
         expect(scope.error).toBe(errorMessage);

diff --git a/modules/core/client/app/config.js b/modules/core/client/app/config.js
@@ -4,7 +4,7 @@
 var ApplicationConfiguration = (function () {
   // Init module configuration options
   var applicationModuleName = 'mean';
-  var applicationModuleVendorDependencies = ['ngResource', 'ngAnimate', 'ui.router', 'ui.bootstrap', 'ui.utils', 'angularFileUpload'];
+  var applicationModuleVendorDependencies = ['ngResource', 'ngAnimate', 'ngMessages', 'ui.router', 'ui.bootstrap', 'ui.utils', 'angularFileUpload'];
 
   // Add a new vertical module
   var registerModule = function (moduleName, dependencies) {

diff --git a/modules/core/client/css/core.css b/modules/core/client/css/core.css
@@ -12,12 +12,6 @@
 .x-ng-cloak {
   display: none !important;
 }
-.ng-invalid.ng-dirty {
-  border-color: #FA787E;
-}
-.ng-valid.ng-dirty {
-  border-color: #78FA89;
-}
 .header-profile-image {
   opacity: 0.8;
   height: 28px;
@@ -33,3 +27,12 @@ a:hover .header-profile-image {
   padding-top: 11px !important;
   padding-bottom: 11px !important;
 }
+.error-text {
+  display: none;
+}
+.has-error .help-block.error-text {
+  display: block;
+}
+.has-error .help-inline.error-text {
+  display: inline;
+}
diff --git a/modules/core/client/directives/show-errors.client.directives.js b/modules/core/client/directives/show-errors.client.directives.js
@@ -0,0 +1,74 @@
+'use strict';
+
+/**
+ * Edits by Ryan Hutchison
+ * Credit: https://github.com/paulyoder/angular-bootstrap-show-errors */
+
+angular.module('core')
+  .directive('showErrors', ['$timeout', '$interpolate', function ($timeout, $interpolate) {
+    var linkFn = function (scope, el, attrs, formCtrl) {
+      var inputEl, inputName, inputNgEl, options, showSuccess, toggleClasses,
+        initCheck = false,
+        showValidationMessages = false,
+        blurred = false;
+
+      options = scope.$eval(attrs.showErrors) || {};
+      showSuccess = options.showSuccess || false;
+      inputEl = el[0].querySelector('.form-control[name]') || el[0].querySelector('[name]');
+      inputNgEl = angular.element(inputEl);
+      inputName = $interpolate(inputNgEl.attr('name') || '')(scope);
+
+      if (!inputName) {
+        throw 'show-errors element has no child input elements with a \'name\' attribute class';
+      }
+
+      var reset = function () {
+        return $timeout(function () {
+          el.removeClass('has-error');
+          el.removeClass('has-success');
+          showValidationMessages = false;
+        }, 0, false);
+      };
+
+      scope.$watch(function () {
+        return formCtrl[inputName] && formCtrl[inputName].$invalid;
+      }, function (invalid) {
+        return toggleClasses(invalid);
+      });
+
+      scope.$on('show-errors-check-validity', function (event, name) {
+        if (angular.isUndefined(name) || formCtrl.$name === name) {
+          initCheck = true;
+          showValidationMessages = true;
+
+          return toggleClasses(formCtrl[inputName].$invalid);
+        }
+      });
+
+      scope.$on('show-errors-reset', function (event, name) {
+        if (angular.isUndefined(name) || formCtrl.$name === name) {
+          return reset();
+        }
+      });
+
+      toggleClasses = function (invalid) {
+        el.toggleClass('has-error', showValidationMessages && invalid);
+        if (showSuccess) {
+          return el.toggleClass('has-success', showValidationMessages && !invalid);
+        }
+      };
+    };
+
+    return {
+      restrict: 'A',
+      require: '^form',
+      compile: function (elem, attrs) {
+        if (attrs.showErrors.indexOf('skipFormGroupCheck') === -1) {
+          if (!(elem.hasClass('form-group') || elem.hasClass('input-group'))) {
+            throw 'show-errors element does not have the \'form-group\' or \'input-group\' class';
+          }
+        }
+        return linkFn;
+      }
+    };
+}]);
diff --git a/modules/users/client/controllers/admin/user.client.controller.js b/modules/users/client/controllers/admin/user.client.controller.js
@@ -19,7 +19,13 @@ angular.module('users.admin').controller('UserController', ['$scope', '$state',
       }
     };
 
-    $scope.update = function () {
+    $scope.update = function (isValid) {
+      if (!isValid) {
+        $scope.$broadcast('show-errors-check-validity', 'userForm');
+
+        return false;
+      }
+
       var user = $scope.user;
 
       user.$update(function () {

diff --git a/modules/users/client/controllers/authentication.client.controller.js b/modules/users/client/controllers/authentication.client.controller.js
@@ -12,7 +12,15 @@ angular.module('users').controller('AuthenticationController', ['$scope', '$stat
       $location.path('/');
     }
 
-    $scope.signup = function () {
+    $scope.signup = function (isValid) {
+      $scope.error = null;
+
+      if (!isValid) {
+        $scope.$broadcast('show-errors-check-validity', 'userForm');
+
+        return false;
+      }
+
       $http.post('/api/auth/signup', $scope.credentials).success(function (response) {
         // If successful we assign the response to the global user model
         $scope.authentication.user = response;
@@ -24,7 +32,15 @@ angular.module('users').controller('AuthenticationController', ['$scope', '$stat
       });
     };
 
-    $scope.signin = function () {
+    $scope.signin = function (isValid) {
+      $scope.error = null;
+
+      if (!isValid) {
+        $scope.$broadcast('show-errors-check-validity', 'userForm');
+
+        return false;
+      }
+
       $http.post('/api/auth/signin', $scope.credentials).success(function (response) {
         // If successful we assign the response to the global user model
         $scope.authentication.user = response;

diff --git a/modules/users/client/controllers/settings/change-password.client.controller.js b/modules/users/client/controllers/settings/change-password.client.controller.js
@@ -5,11 +5,18 @@ angular.module('users').controller('ChangePasswordController', ['$scope', '$http
     $scope.user = Authentication.user;
 
     // Change user password
-    $scope.changeUserPassword = function () {
+    $scope.changeUserPassword = function (isValid) {
       $scope.success = $scope.error = null;
 
+      if (!isValid) {
+        $scope.$broadcast('show-errors-check-validity', 'passwordForm');
+
+        return false;
+      }
+
       $http.post('/api/users/password', $scope.passwordDetails).success(function (response) {
         // If successful show success message and clear form
+        $scope.$broadcast('show-errors-reset', 'passwordForm');
         $scope.success = true;
         $scope.passwordDetails = null;
       }).error(function (response) {

diff --git a/modules/users/client/controllers/settings/edit-profile.client.controller.js b/modules/users/client/controllers/settings/edit-profile.client.controller.js
@@ -6,19 +6,24 @@ angular.module('users').controller('EditProfileController', ['$scope', '$http',
 
     // Update a user profile
     $scope.updateUserProfile = function (isValid) {
-      if (isValid) {
-        $scope.success = $scope.error = null;
-        var user = new Users($scope.user);
+      $scope.success = $scope.error = null;
 
-        user.$update(function (response) {
-          $scope.success = true;
-          Authentication.user = response;
-        }, function (response) {
-          $scope.error = response.data.message;
-        });
-      } else {
-        $scope.submitted = true;
+      if (!isValid) {
+        $scope.$broadcast('show-errors-check-validity', 'userForm');
+
+        return false;
       }
+
+      var user = new Users($scope.user);
+
+      user.$update(function (response) {
+        $scope.$broadcast('show-errors-reset', 'userForm');
+
+        $scope.success = true;
+        Authentication.user = response;
+      }, function (response) {
+        $scope.error = response.data.message;
+      });
     };
   }
 ]);