Fixed bug #16 reset ValidationSummary route change

- Added option to display only last error message instead of all
messages at once
- Added new template to display ngRepeat examples, also help
troubleshooting the follwoing bug.
- Fixed a bug (probably linked to issue #16) where changing route on
View/Controller would make the ValidationSummary fail when coming back
to original View/Controller, this bug was associated to the fact that
the ValidationSummary kept growing from Controller to Controller, now
this ValidationSummary is wipe out as soon as we detect a route change.

Author: ghiscoding

app.js

@@ -5,21 +5,11 @@ var myApp = angular.module('myApp', ['ngRoute', 'ghiscoding.validation', 'pascal
 myApp.config(['$compileProvider', '$locationProvider', '$routeProvider', function ($compileProvider, $locationProvider, $routeProvider) {
     $compileProvider.debugInfoEnabled(false);
     $routeProvider
-      .when('/validate-directive', {
-        templateUrl: 'templates/testingFormDirective.html',
-        controller: 'CtrlValidationDirective'
-      })
-      .when('/validate-2forms', {
-        templateUrl: 'templates/testing2Forms.html',
-        controller: 'Ctrl2forms'
-      })
-      .when('/validate-service', {
-        templateUrl: 'templates/testingFormService.html',
-        controller: 'CtrlValidationService'
-      })
-      .otherwise({
-        redirectTo: 'validate-directive',
-      });
+      .when('/validate-directive', { templateUrl: 'templates/testingFormDirective.html', controller: 'CtrlValidationDirective' })
+      .when('/validate-2forms', { templateUrl: 'templates/testing2Forms.html', controller: 'Ctrl2forms' })
+      .when('/validate-ngRepeat', { templateUrl: 'templates/testingFormNgRepeat.html', controller: 'CtrlNgRepeat' })
+      .when('/validate-service', { templateUrl: 'templates/testingFormService.html', controller: 'CtrlValidationService' })
+      .otherwise({ redirectTo: 'validate-directive'  });
   }])
 	.config(['$translateProvider', function ($translateProvider) {
 	  $translateProvider.useStaticFilesLoader({
@@ -135,4 +125,24 @@ myApp.controller('CtrlValidationService', ['$scope', '$translate', 'validationSe
       alert('All good, proceed with submit...');
     }
   }
+}]);
+
+// -- Controller to use Angular-Validation with Directive and ngRepeat
+// ---------------------------------------------------------------
+myApp.controller('CtrlNgRepeat', ['$scope', 'validationService', function ($scope, validationService) {
+  // Form data
+  $scope.people = [
+    { name: 'John', age: 20 },
+    { name: 'Jane', age: null },
+    { name: null, age: null }
+  ];
+
+  $scope.submitForm = function() {
+    if(new validationService().checkFormValidity($scope.form01)) {
+      alert('All good, proceed with submit...');
+    }
+  }
+  $scope.showValidationSummary = function () {
+    $scope.displayValidationSummary = true;
+  }
 }]);

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-validation-ghiscoding",
-  "version": "1.3.22",
+  "version": "1.3.23",
   "author": "Ghislain B.",
   "description": "Angular-Validation Directive and Service (ghiscoding)",
   "main": [

changelog.txt

@@ -23,4 +23,5 @@ Angular-Validation change logs
 1.3.19 (2015-04-20) Fixed issue #28 - unbind all 'blur' in cancelValidation() might affect other modules
 1.3.20 (2015-04-21) Fixed issue #26 - validation of forms inside ng-repeat (added sample `dynamicFormView` in `more-examples` folder). And again issue #28 - unbind all 'blur' in cancelValidation() might affect other modules.
 1.3.21 (2015-04-29) Moved the Alternate Text inside the $translate promise as well which removes possible delay of non-translated text appearing as alternate text (this will not affect regular text, or already translated text). Also cleanup code and made my Gulp task even more automated.
-1.3.22 (2015-05-03) Added new element attribute of `friendly-name` which is used ONLY in the ValidationSummary, this friendly name is to give a better element name display, which also support translation, inside the ValidationSummary instead of just "input1" (see ValidationSummary for more details).
+1.3.22 (2015-05-03) Added new element attribute of `friendly-name` which is used ONLY in the ValidationSummary, this friendly name is to give a better element name display, which also support translation, inside the ValidationSummary instead of just "input1" (see ValidationSummary for more details).
+1.3.23 (2015-05-05) Added option to display only last error message instead of all messages at once. Fixed a bug where changing route on View/Controller would make the ValidationSummary fail when coming back to original View/Controller, this bug was associated to the fact that the ValidationSummary kept growing from Controller to Controller, now this ValidationSummary is wipe out as soon as we detect a route change.

dist/angular-validation.min.js

@@ -69,7 +69,7 @@ gulp.task('compress', ['clean'], function() {
     // bump version for js file header
     newVersion = semver.inc(oldVersion, 'patch');
 
-    // bump version in package & bower
+    // bump version for both: package & bower
     gulp.src(['./package.json', './bower.json'])
       .pipe(bump())
       .pipe(gulp.dest('./'));

gulpfile.js

@@ -29,6 +29,7 @@ <h1>Angular-Validation Directive|Service (ghiscoding)</h1>
 				<button type="button" class="btn btn-default" ng-click="goto('/validate-directive')">Directive</button>
 				<button type="button" class="btn btn-default" ng-click="goto('/validate-service')">Service</button>
 				<button type="button" class="btn btn-default" ng-click="goto('/validate-2forms')">2 Forms</button>
+				<button type="button" class="btn btn-default" ng-click="goto('/validate-ngRepeat')">ngRepeat</button>
 			</div>
 
 			<br/><hr/>

index.html

@@ -1,6 +1,6 @@
 {
   "name": "angular-validation-ghiscoding",
-  "version": "1.3.22",
+  "version": "1.3.23",
   "author": "Ghislain B.",
   "description": "Angular-Validation Directive and Service (ghiscoding)",
   "main": "app.js",

package.json

@@ -1,5 +1,5 @@
 #Angular Validation (Directive / Service)
-`Version: 1.3.22`
+`Version: 1.3.23`
 ### Form validation after user inactivity of default 1sec. (customizable timeout)
 
 Forms Validation with Angular made easy! Angular-Validation is an angular directive/service with locales (languages) with a very simple approach of defining your `validation=""` directly within your element to validate (input, textarea, etc) and...that's it!!! The directive/service will take care of the rest!
@@ -8,7 +8,7 @@ The base concept is not new, it comes from the easy form input validation approa
 
 For a smoother user experience, I also added validation on inactivity (timer/debounce). So validation will not bother the user while he is still typing... though as soon as the user pauses for a certain amount of time, then validation comes into play. It's worth knowing that this inactivity timer is only available while typing, if user focuses away from his input (onBlur) it will then validate instantly.
 
-Supporting AngularJS 1.3.x *(current code should work with 1.2.x just the same but is no more verified)*
+Supporting AngularJS 1.3.x *(current code should work with 1.2.x just the same, but is no more verified)*
 
 Now support <b>Service</b> using the same functionalities as the <b>Directive</b>.
 Huge rewrite to have a better code separation and also adding support to Service functionalities. Specifically the `validation-rules` was separated to add rules without affecting the core while `validation-common` is for shared functions (shared by Directive/Service).
@@ -17,7 +17,7 @@ Huge rewrite to have a better code separation and also adding support to Service
 
 For more reasons to use it, see the answered question of: [Why Use It?](#whyuseit)
 
-If you do use it, please click on the Star and add it as a favourite. The more star ratings there is, the more chances it could found by other users as a populate trend. That is the only support I ask you... thanks ;)
+If you do use Angular-Validation, please click on the **Star** and add it as a favourite. The more star ratings there is, the more chances it could found by other users inside the popular trend section. That is the only support I ask you... thanks ;)
 
 <a name="plunker"></a>
 ## Live Demo
@@ -51,7 +51,7 @@ into the following (errors will be displayed in your chosen locale translation):
 <input type="text" name="firstname" ng-model="user.firstname" validation="alpha_dash|min_len:3|max_len:50|required"  />
 <input type="text" name="lastname" ng-model="user.lastname" validation="alpha_dash|min_len:2|max_len:50|required"  />
 ```
-The Angular-Validation will create, by itself, the necessary error message. Now imagine your form with 10 inputs, using the Angular-Validation will end up using 10 lines of code, while on the other hand using the default of Angular will give you 30 lines of code... so what are you waiting for? Use Angular-Validation!!! :)
+The Angular-Validation will create, by itself, the necessary error message. Now imagine your form having 10 inputs, using the documented Angular way will end up being 30 lines of code, while on the other hand `Angular-Validation` will stay with 10 lines of code, no more... so what are you waiting for? Use Angular-Validation!!!  Don't forget to add it to your favorite, click on the **Star** :)
 
 Let's not forget the [Validation Summary](/ghiscoding/angular-validation/wiki/Validation-Summary) which is also a great and useful way of displaying your errors to the user.
 

readme.md

@@ -4,26 +4,35 @@
  *
  * @author: Ghislain B.
  * @desc: angular-validation common functions used by both the Directive & Service
- * From the outside we will define our complete validation through: defineValidation()
  *
  */
 angular
   .module('ghiscoding.validation')
-  .factory('validationCommon', ['$timeout', '$translate', 'validationRules', function ($timeout, $translate, validationRules) {
+  .factory('validationCommon', ['$rootScope', '$timeout', '$translate', 'validationRules', function ($rootScope, $timeout, $translate, validationRules) {
     // global variables of our object
-    var bFieldRequired = false;   // by default we'll consider our field not required, if validation attribute calls it, then we'll start validating
-    var INACTIVITY_LIMIT = 1000;  // constant of maximum user inactivity time limit, this is the default cosntant but can be variable through typingLimit variable
-
-    var elm;                      // element object of current form element
-    var ctrl;                     // ctrl object of the current form element
-    var scope;                    // scope object of the current form element
-    var value;                    // value of current form element
-    var timer;                    // timer of user inactivity time
-    var typingLimit;              // maximum user inactivity typing limit
-    var formElements = [];        // Array of all Form Elements, this is not a DOM Elements, these are custom objects defined as { fieldName, elm,  attrs, ctrl, isValid, message }
-    var validators = [];          // Array of all Form Validators
-    var validatorAttrs = {};      // Current Validator attributes
-    var validationSummary = [];   // Array Validation Error Summary
+    var bypassRootScopeReset = false;     // do we want to bypass the watch on the $rootScope? False by default
+    var bDisplayOnlyLastErrorMsg = false; // display only 1 error message at a time, by default it's false since we will display all errors of each element
+    var bFieldRequired = false;           // by default we'll consider our field not required, if validation attribute calls it, then we'll start validating
+    var INACTIVITY_LIMIT = 1000;          // constant of maximum user inactivity time limit, this is the default cosntant but can be variable through typingLimit variable
+
+    var elm;                              // element object of current form element
+    var ctrl;                             // ctrl object of the current form element
+    var scope;                            // scope object of the current form element
+    var value;                            // value of current form element
+    var timer;                            // timer of user inactivity time
+    var typingLimit;                      // maximum user inactivity typing limit
+    var formElements = [];                // Array of all Form Elements, this is not a DOM Elements, these are custom objects defined as { fieldName, elm,  attrs, ctrl, isValid, message }
+    var validators = [];                  // Array of all Form Validators
+    var validatorAttrs = {};              // Current Validator attributes
+    var validationSummary = [];           // Array Validation Error Summary
+
+    // watch on route change, then reset some global variables, so that we don't cary over other controller/view validations
+    $rootScope.$on("$routeChangeStart", function (event, next, current) {
+      if (!bypassRootScopeReset) {
+        formElements = [];        // array containing all form elements, valid or invalid
+        validationSummary = [];   // array containing the list of invalid fields inside a validationSummary
+      }
+    });
 
     // service constructor
     var validationCommon = function(scope, elm, attrs, ctrl) {
@@ -45,15 +54,17 @@ angular
     };
 
     // list of available published public functions of this object
-    validationCommon.prototype.defineValidation = defineValidation;                       // define our validation object
-    validationCommon.prototype.getFormElementByName = getFormElementByName;               // get the form element custom object by it's name
-    validationCommon.prototype.getFormElements = getFormElements;                         // get the array of form elements (custom objects)
-    validationCommon.prototype.isFieldRequired = isFieldRequired;                         // return boolean knowing if the current field is required
-    validationCommon.prototype.initialize = initialize;                                   // initialize current object with passed arguments
-    validationCommon.prototype.updateErrorMsg = updateErrorMsg;                           // update on screen an error message below current form element
-    validationCommon.prototype.validate = validate;                                       // validate current element
-    validationCommon.prototype.removeFromValidationSummary = removeFromValidationSummary; // remove an element from the $validationSummary
-    validationCommon.prototype.removeFromFormElementObjectList = removeFromFormElementObjectList;  // remove named items from formElements list
+    validationCommon.prototype.defineValidation = defineValidation;                                 // define our validation object
+    validationCommon.prototype.getFormElementByName = getFormElementByName;                         // get the form element custom object by it's name
+    validationCommon.prototype.getFormElements = getFormElements;                                   // get the array of form elements (custom objects)
+    validationCommon.prototype.isFieldRequired = isFieldRequired;                                   // return boolean knowing if the current field is required
+    validationCommon.prototype.initialize = initialize;                                             // initialize current object with passed arguments
+    validationCommon.prototype.removeFromValidationSummary = removeFromValidationSummary;           // remove an element from the $validationSummary
+    validationCommon.prototype.removeFromFormElementObjectList = removeFromFormElementObjectList;   // remove named items from formElements list
+    validationCommon.prototype.setBypassRootScopeReset = setBypassRootScopeReset;                   // setter on: do we want to bypass the root scope reset?
+    validationCommon.prototype.setDisplayOnlyLastErrorMsg = setDisplayOnlyLastErrorMsg;             // setter on the behaviour of displaying only the last error message
+    validationCommon.prototype.updateErrorMsg = updateErrorMsg;                                     // update on screen an error message below current form element
+    validationCommon.prototype.validate = validate;                                                 // validate current element
 
     // return the service object
     return validationCommon;
@@ -188,6 +199,23 @@ angular
       }
     }
 
+    /** Setter on the action of bypassing the root scope reset, you can change the default behavior with this function here.
+     * Explanation: By default a route change will trigger a reset of some global variables (formElements, validationSummary),
+     * so that we don't see validations of previous routes or controllers.
+     * @param boolean value
+     */
+    function setBypassRootScopeReset(boolValue) {
+      bypassRootScopeReset = boolValue;
+    }
+
+    /** Setter on the behaviour of displaying only the last error message of each element.
+     * By default this is false, so the behavior is to display all error messages of each element.
+     * @param boolean value
+     */
+    function setDisplayOnlyLastErrorMsg(boolValue) {
+      bDisplayOnlyLastErrorMsg = boolValue;
+    }
+
     /** in general we will display error message at the next element after our input as <span class="validation validation-inputName text-danger">
       * but in some cases user might want to define which DOM id to display error (as validation attribute)
       * @param string message: error message to display
@@ -354,15 +382,25 @@ angular
               msgToTranslate = validator.altText.replace("alt=", "");
             }
 
-            $translate(msgToTranslate).then(function(translation) {
-              message += ' ' + replaceParams(validator, translation);
+            $translate(msgToTranslate).then(function (translation) {
+              // if user is requesting to see only the last error message
+              if (message.length > 0 && bDisplayOnlyLastErrorMsg) {
+                message = ' ' + replaceParams(validator, translation);
+              } else {
+                message += ' ' + replaceParams(validator, translation);
+              }
               addToValidationAndDisplayError(self, formElmObj, message, isFieldValid, showError);
             }).catch(function(data) {
               // error caught:
               // alternate text might not need translation if the user sent his own custom message or is already translated
               // so just send it directly into the validation summary.
-              if(!!validator.altText && validator.altText.length > 0) {
-                message += ' ' + msgToTranslate;
+              if (!!validator.altText && validator.altText.length > 0) {
+                // if user is requesting to see only the last error message
+                if (message.length > 0 && bDisplayOnlyLastErrorMsg) {
+                  message = ' ' + msgToTranslate;
+                } else {
+                  message += ' ' + msgToTranslate;
+                }
                 addToValidationAndDisplayError(self, formElmObj, message, isFieldValid, showError);
               }
             });