Fixed #23 - $validationSummary problems 2+ forms

Fixed #23 - If multiple forms exist in the app the errors in 1 form
affect validation in the other

Author: ghiscoding

app.js

@@ -9,6 +9,10 @@ myApp.config(['$compileProvider', '$locationProvider', '$routeProvider', functio
         templateUrl: 'templates/testingFormDirective.html',
         controller: 'CtrlValidationDirective'
       })
+      .when('/validate-2forms', {
+        templateUrl: 'templates/testing2Forms.html',
+        controller: 'Ctrl2forms'
+      })
       .when('/validate-service', {
         templateUrl: 'templates/testingFormService.html',
         controller: 'CtrlValidationService'
@@ -54,6 +58,17 @@ myApp.controller('CtrlValidationDirective', ['$scope', 'validationService', func
   }
 }]);
 
+myApp.controller('Ctrl2forms', ['$scope', 'validationService', function ($scope, validationService) {
+  $scope.submitForm = function() {
+    if(new validationService().checkFormValidity($scope.form01)) {
+      alert('All good, proceed with submit...');
+    }
+  }
+  $scope.showValidationSummary = function () {
+    $scope.displayValidationSummary = true;
+  }
+}]);
+
 // -- Controller to use Angular-Validation Service
 // -----------------------------------------------
 

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "ghiscoding.angular-validation",
-  "version": "1.3.14",
+  "version": "1.3.15",
   "authors": [
     "Ghislain B."
   ],

changelog.txt

@@ -15,4 +15,5 @@ Angular-Validation change logs
 1.3.11 (2015-03-30): Accepted pull request #15 to fix form without name attribute. Also accepted pull request #18 to add Spanish locales.
 1.3.12 (2015-04-04): Fix issue #16 and added Validators Alternate Text option on all type of validators. Also fixed removeValidator and clean a lot of code.
 1.3.13 (2015-04-06) Fixed $translate delay issue when using external JSON files
-1.3.14 (2015-04-07) Merge pull request #19 Added norwegian translation and changes to allow user to remove invalid validators.
+1.3.14 (2015-04-07) Merge pull request #19 Added norwegian translation and changes to allow user to remove invalid validators.
+1.3.15 (2015-04-08) Fixed #23 If multiple forms exist in the app the errors in 1 form affect validation in the other

dist/angular-validation.min.js

@@ -27,6 +27,7 @@ <h1>Angular-Validation Directive|Service (ghiscoding)</h1>
 			<div class="btn-group btn-group-sm">
 				<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>
 			</div>
 
 			<br/><hr/>

index.html

@@ -51,7 +51,7 @@
     "INVALID_REQUIRED":                 "Field is required. ",
     "INVALID_URL":                      "Must be a valid URL. ",
     "INVALID_TIME":                     "Must be a valid time format (hh:mm) OR (hh:mm:ss). ",
-    "INVALID_CHECKBOX_SELECTED":        "Checkbox must be selected",
+    "INVALID_CHECKBOX_SELECTED":        "Checkbox must be selected. ",
 
     "AREA1":                            "TextArea: Alphanumeric + Minimum(15) + Required",
     "ERRORS":                           "Errors",

locales/validation/en.json

@@ -51,7 +51,7 @@
     "INVALID_REQUIRED":                 "El campo es requerido. ",
     "INVALID_URL":                      "Debe contener una dirección URL valida. ",
     "INVALID_TIME":                     "Debe contener un formato de tiempo valido (hh:mm) ó (hh:mm:ss). ",
-    "INVALID_CHECKBOX_SELECTED":        "Checkbox must be selected",
+    "INVALID_CHECKBOX_SELECTED":        "Casilla de verificación debe ser seleccionado. ",
 
     "AREA1":                            "Area de texto: Alfanúmerica + Minimo(15) + Requerido",
     "ERRORS":                           "Errores",

locales/validation/es.json

@@ -51,7 +51,7 @@
     "INVALID_REQUIRED":                 "Le champ est requis. ",
     "INVALID_URL":                      "Doit être un URL valide. ",
     "INVALID_TIME":                     "Doit être un format de date valide (hh:mm) OU (hh:mm:ss). ",
-    "INVALID_CHECKBOX_SELECTED":        "Checkbox must be selected",
+    "INVALID_CHECKBOX_SELECTED":        "La case à cocher doit être sélectionnée. ",
 
     "AREA1":                            "TextArea: Alphanumérique + Minimum(15) + Required",
     "ERRORS":                           "Erreurs",

locales/validation/fr.json

@@ -1,6 +1,6 @@
 {
   "name": "ghiscoding.angular-validation",
-  "version": "1.3.14",
+  "version": "1.3.15",
   "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.14`
+`Version: 1.3.15`
 ### 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!
@@ -459,4 +459,5 @@ License
 * [1.3.11](https://github.com/ghiscoding/angular-validation/commit/e807584f0bcdf0f28ef2ef905b6bc4e890926ac1) `2015-03-30` Accepted pull request #15 to fix form without name attribute. Also accepted pull request #18 to add Spanish locales.
 * [1.3.12](https://github.com/ghiscoding/angular-validation/commit/0af82337a6961923e3b022a19660237d3e6f7184) `2015-04-04` Fix issue #16 and added Validators Alternate Text option on all type of validators. Also fixed removeValidator and clean a lot of code.
 * [1.3.13](https://github.com/ghiscoding/angular-validation/commit/d0440bdd7fc2816e03d28ad3a9c3bd7bee8ac519) `2015-04-06` Fixed $translate delay issue when using external JSON files
-* [1.3.14](https://github.com/ghiscoding/angular-validation/pull/19) `2015-04-07` Merge pull request #19 Added norwegian translation and changes to allow user to remove invalid validators
+* [1.3.14](https://github.com/ghiscoding/angular-validation/pull/19) `2015-04-07` Merge pull request #19 Added norwegian translation and changes to allow user to remove invalid validators
+* [1.3.15]() `2015-04-08` Fixed #23 If multiple forms exist in the app the errors in 1 form affect validation in the other

readme.md

@@ -26,6 +26,7 @@ angular
     var validators = [];          // Array of all Form Validators
     var validatorAttrs = {};      // Current Validator attributes
     var validationSummary = [];   // Array Validation Error Summary
+    var validationSummaries = {}; // Validation Error Summaries separated by Form (could be multiple forms)
     var $translate = $filter('translate');
 
     // service constructor
@@ -396,13 +397,14 @@ angular
      */
     function addToValidationSummary(self, message) {
       var elmName = self.elm.attr('name');
-      var index = arrayFindObjectIndex(validationSummary, 'field', elmName); // find index of object in our array
+      var form = getElementParentForm(self);                                  // find the parent form (only found if it has a name)
+      var index = arrayFindObjectIndex(validationSummary, 'field', elmName);  // find index of object in our array
 
       // if message is empty, remove it from the validation summary
       if(index >= 0 && message === '') {
         validationSummary.splice(index, 1);
       }else if(message !== '') {
-        var errorObj = { field: elmName, message: message };
+        var errorObj = { field: elmName, message: message, formName: (!!form) ? form.$name : null };
 
         // if error already exist then refresh the error object inside the array, else push it to the array
         if(index >= 0) {
@@ -412,11 +414,14 @@ angular
         }
       }
 
-      // save validation summary 2 variable locations, inside the scope object and also in the form object (if found)
+      // save validation summary scope root
       self.scope.$validationSummary = validationSummary;
-      var form = getScopeForm(self);
+
+      // and also save it inside the current scope form (if found)
       if (!!form) {
-        form.$validationSummary = validationSummary;
+        // since validationSummary contain errors of all forms
+        // we need to find only the errors of current form and them into the current scope form object
+        form.$validationSummary = arrayFindObjects(validationSummary, 'formName', form.$name);
       }
     }
 
@@ -435,6 +440,22 @@ angular
       return null;
     }
 
+    /** Quick function to find all object(s) inside an array of objects by it's given field name and value, return array of object found(s) or empty array
+     * @param Array sourceArray
+     * @param string searchId: search property id
+     * @param string searchValue: value to search
+     * @return array of object found from source array
+     */
+    function arrayFindObjects(sourceArray, searchId, searchValue) {
+      var results = [];
+      for (var i = 0; i < sourceArray.length; i++) {
+        if (sourceArray[i][searchId] === searchValue) {
+          results.push(sourceArray[i]);
+        }
+      }
+      return results;
+    }
+
     /** Quick function to find an object inside an array by it's given field name and value, return the index position found or -1
      * @param Array sourceArray
      * @param string searchId: search property id
@@ -450,6 +471,24 @@ angular
       return -1;
     }
 
+    /** Get the element's parent Angular form (if found)
+     * @param object self
+     * @return object scope form
+     */
+    function getElementParentForm(self) {
+      // from the element passed, get his parent form
+      var elmName = self.elm.attr('name');
+      var forms = document.getElementsByName(elmName);
+
+      for (var i = 0; i < forms.length; i++) {
+        var form = forms[i].form;
+        if (!!form && form.name && self.scope[form.name]) {
+          return self.scope[form.name];
+        }
+      }
+      return null;
+    }
+
     /** Get form within scope (if found)
     * @param object self
     * @return object scope form

src/validation-common.js

@@ -28,8 +28,8 @@ angular
     validationService.prototype.checkFormValidity = checkFormValidity;  // check the form validity (can be called by an empty validationService and used by both Directive/Service)
     validationService.prototype.removeValidator = removeValidator;      // remove a Validator from an element
     validationService.prototype.setGlobalOptions = setGlobalOptions;    // set and initialize global options used by all validators
-     validationService.prototype.clearInvalidValidatorsInSummary = clearInvalidValidatorsInSummary; // clear clearInvalidValidatorsInSummary
-	 
+    validationService.prototype.clearInvalidValidatorsInSummary = clearInvalidValidatorsInSummary; // clear clearInvalidValidatorsInSummary
+
     return validationService;
 
 	  //----
@@ -93,9 +93,9 @@ angular
 		} // addValidator()
 
     /** Remove all objects in validationsummary and matching objects in FormElementList.
-     * This is for use in a wizard type setting, where you 'move back' to a previous page in wizard. 
+     * This is for use in a wizard type setting, where you 'move back' to a previous page in wizard.
      * In this case you need to remove invalid validators that will exist in 'the future'.
-     * @param object Angular Form or Scope Object     
+     * @param object Angular Form or Scope Object
      */
     function clearInvalidValidatorsInSummary(obj) {
       var self = this;

src/validation-service.js

@@ -0,0 +1,66 @@
+<h3>Directive - 2 Forms</h3>
+
+<div class="checkbox text-right" style="margin-top:-25px">
+    <label>
+      <input type="checkbox" ng-model="displayValidationSummary"> {{ 'SHOW_VALIDATION_SUMMARY' | translate }}
+    </label>
+</div>
+
+<hr />
+
+<!-- Angular-Validation saves the summary of errors inside 2 locations: 1- $scope.$validationSummary 2- $scope.formName.$validationSummary (only accessible if you named your form) so it becomes easy to show all errors -->
+<div class="alert alert-danger alert-dismissable" ng-show="displayValidationSummary">
+    <button type="button" class="close" data-dismiss="alert" aria-hidden="true" ng-click="displayValidationSummary = false">&times;</button>
+    <h4><strong>{{ 'ERRORS' | translate }}!</strong></h4>
+    <ul>
+        <li ng-repeat="item in form01.$validationSummary">{{item.field }}: {{item.message}}</li>
+    </ul>
+</div>
+
+<form novalidate name="form01" method="POST">
+    <fieldset>
+        <div class="form-group">
+            <label for="input2">{{ 'INPUT2' | translate }}</label>
+            <input type="number" class="form-control" name="input2" placeholder="numeric_signed|required" ng-model="input2" validation="numeric_signed|required" />
+        </div>
+        <div class="form-group">
+            <label for="input3">{{ 'INPUT3' | translate }}</label>
+            <input type="number" class="form-control" name="input3" placeholder="float_signed|between_num:-0.6,99.5|required" ng-model="input3" validation="float_signed|between_num:-0.6,99.5|required" />
+        </div>
+    </fieldset>
+
+    <div class="form-actions">
+        <button type="submit" name="save_btn" class="btn btn-primary" ng-disabled="form01.$invalid" >{{ 'SAVE' | translate }}</button>
+    </div>
+</form>
+
+<hr />
+
+<div class="alert alert-danger alert-dismissable" ng-show="displayValidationSummary">
+    <button type="button" class="close" data-dismiss="alert" aria-hidden="true" ng-click="displayValidationSummary = false">&times;</button>
+    <h4><strong>{{ 'ERRORS' | translate }}!</strong></h4>
+    <ul>
+        <li ng-repeat="item in form02.$validationSummary">{{item.field }}: {{item.message}}</li>
+    </ul>
+</div>
+<form novalidate name="form02" method="POST">
+    <fieldset>
+        <div class="form-group">
+            <label for="select1">{{ 'SELECT1' | translate }}</label>
+            <select class="form-control" name="select1" ng-model="select1" validation="required:alt={{ 'CHANGE_LANGUAGE' | translate }}">
+                <option value="">...</option>
+                <option value="en">English</option>
+                <option value="es">Español</option>
+                <option value="fr">French</option>
+            </select>
+        </div>
+        <div class="form-group">
+            <label for="area1">{{ 'AREA1' | translate }}</label>
+            <textarea class="form-control" name="area1" rows="3" placeholder="alpha_dash_spaces|min_len:15|required" validation="alpha_dash_spaces|min_len:15|required" ng-model="area1"></textarea>
+        </div>
+    </fieldset>
+
+    <div class="form-actions">
+        <button type="submit" name="save_btn" class="btn btn-primary" ng-disabled="form02.$invalid" >{{ 'SAVE' | translate }}</button>
+    </div>
+</form>