Skip to content
This repository has been archived by the owner on Jul 1, 2020. It is now read-only.

Commit

Permalink
Fixed #23 - $validationSummary problems 2+ forms
Browse files Browse the repository at this point in the history
Fixed #23 - If multiple forms exist in the app the errors in 1 form
affect validation in the other
  • Loading branch information
ghiscoding committed Apr 9, 2015
1 parent 1c67eb8 commit 24037e4
Show file tree
Hide file tree
Showing 13 changed files with 144 additions and 21 deletions.
15 changes: 15 additions & 0 deletions app.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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
// -----------------------------------------------

Expand Down
2 changes: 1 addition & 1 deletion bower.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "ghiscoding.angular-validation",
"version": "1.3.14",
"version": "1.3.15",
"authors": [
"Ghislain B."
],
Expand Down
3 changes: 2 additions & 1 deletion changelog.txt
Original file line number Diff line number Diff line change
Expand Up @@ -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
8 changes: 4 additions & 4 deletions dist/angular-validation.min.js

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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/>
Expand Down
2 changes: 1 addition & 1 deletion locales/validation/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion locales/validation/es.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion locales/validation/fr.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
5 changes: 3 additions & 2 deletions readme.md
Original file line number Diff line number Diff line change
@@ -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!
Expand Down Expand Up @@ -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
49 changes: 44 additions & 5 deletions src/validation-common.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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) {
Expand All @@ -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);
}
}

Expand All @@ -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
Expand All @@ -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
Expand Down
8 changes: 4 additions & 4 deletions src/validation-service.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;

//----
Expand Down Expand Up @@ -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;
Expand Down
66 changes: 66 additions & 0 deletions templates/testing2Forms.html
Original file line number Diff line number Diff line change
@@ -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>

0 comments on commit 24037e4

Please sign in to comment.