Added isolated scope - Fixed issue #35, #37, #38

- Added possibility to use own isolated scope (issue #37 and #26). - Fixed an implementation issue found from last revision (issue #35). - Fixed email validation (issue #38). - Fixed a performance issue found with onBlur which would run as much validations as there was characters inside the input when onBlur was called (abcdef => would make 6 validations) and this was extremely costly with a Remote validation call. - Update the code of Remote validation to also accept the "As" alias "remote:vm.customRemoteValidation". - Finally added and updated a few Protractor tests to cover all of the above and more.
ghiscoding · Jun 3, 2015 · e0d0b76 · e0d0b76
1 parent 00514f6
commit e0d0b76
Show file tree

Hide file tree

Showing 31 changed files with 425 additions and 128 deletions.
diff --git a/app.js b/app.js
@@ -38,7 +38,7 @@ myApp.controller('Ctrl', ['$location', '$route', '$scope', '$translate', functio
 // -- Controller to use Angular-Validation Directive
 // -----------------------------------------------
 myApp.controller('CtrlValidationDirective', ['$q', '$scope', 'validationService', function ($q, $scope, validationService) {
-  $scope.$validationOptions = { debounce: 1500 }; // you can change default debounce globally
+  $scope.$validationOptions = { debounce: 1500, preValidateFormElements: false }; // you can change default debounce globally
 
   $scope.submitForm = function() {
     if(new validationService().checkFormValidity($scope.form1)) {
@@ -67,6 +67,9 @@ myApp.controller('CtrlValidationDirective', ['$q', '$scope', 'validationService'
 // -- Controller to use Angular-Validation Directive with 2 forms
 // ---------------------------------------------------------------
 myApp.controller('Ctrl2forms', ['$scope', 'validationService', function ($scope, validationService) {
+  // on this page we will pre-validate the form and show all errors on page load
+  $scope.$validationOptions = { debounce: 500, preValidateFormElements: true };
+
   $scope.submitForm = function() {
     if(new validationService().checkFormValidity($scope.form01)) {
       alert('All good, proceed with submit...');
@@ -103,7 +106,7 @@ myApp.controller('CtrlValidationService', ['$q', '$scope', '$translate', 'valida
   //    #3 .addValidator({ elmName: 'inputX', rules: 'myRules'})
   // the available object properties are the exact same set as the directive except that they are camelCase
   myValidation
-    .setGlobalOptions({ debounce: 1500, scope: $scope })
+    .setGlobalOptions({ debounce: 1500, scope: $scope, isolatedScope: $scope, preValidateFormElements: false })
     .addValidator({ elmName: 'input2', debounce: 3000, rules: 'numeric_signed|required'})
     .addValidator('input3', 'float_signed|between_num:-0.6,99.5|required')
     .addValidator('input4', 'exact_len:4|regex:YYWW:=^(0[9]|1[0-9]|2[0-9]|3[0-9])(5[0-2]|[0-4][0-9])$:regex|required|integer')

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-validation-ghiscoding",
-  "version": "1.3.26",
+  "version": "1.3.27",
   "author": "Ghislain B.",
   "description": "Angular-Validation Directive and Service (ghiscoding)",
   "main": [

diff --git a/changelog.txt b/changelog.txt
@@ -27,4 +27,5 @@ Angular-Validation change logs
 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.
 1.3.24 (2015-05-17) Replaced all `:param` inside each locale translations with a better standard of {0}, {1}, etc.. like C# `String.Format()`. Added a full Protractor End-to-End test suite (1000+ asserts). Fixed a few minor bugs found with Protractor test cases. Fixed issue #36, bower.json scripts in wrong order.
 1.3.25 (2015-05-19) Enhancement #34 to add Remote Validation and updated Protractor to cover this new feature.
-1.3.26 (2015-05-30) Added enhancement #35 - PreValidate the Form, display all errors on page load.
+1.3.26 (2015-05-30) Added enhancement #35 - PreValidate the Form, display all errors on page load.
+1.3.27 (2015-06-02) Added possibility to use own isolated scope (issue #37 and #26). Fixed an implementation issue found from last revision (issue #35). Fixed email validation (issue #38). Fixed a performance issue found with onBlur which would run as much validations as there was characters inside the input when onBlur was called (abcdef => would make 6 validations) and this was extremely costly with a Remote validation call. Revisited the Remote validation to accept also the "As" alias "remote:vm.customRemoteValidation". Finally added and updated a few Protractor tests to cover all of the above and more.
diff --git a/dist/angular-validation.min.js b/dist/angular-validation.min.js
diff --git a/full-tests/app.js b/full-tests/app.js
@@ -7,6 +7,9 @@ myApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $
       .when('/validate-Directive', { templateUrl: 'Directive.html', controller: 'CtrlValidationDirective' })
       .when('/validate-Service', { templateUrl: 'Service.html', controller: 'CtrlValidationService' })
       .otherwise({ redirectTo: 'validate-Directive'  });
+  }])
+  .config(['$compileProvider', function ($compileProvider) {
+    $compileProvider.debugInfoEnabled(false);
   }])
 	.config(['$translateProvider', function ($translateProvider) {
 	  $translateProvider.useStaticFilesLoader({

diff --git a/full-tests/index.html b/full-tests/index.html
@@ -45,7 +45,7 @@ <h1>Angular-Validation Directive|Service (ghiscoding)</h1>
 
 			<!-- Angular-Validation -->
 		  	<script type="text/javascript" src="../dist/angular-validation.min.js"></script>
-		  	<!--
+			<!--
 		  	<script type="text/javascript" src="../src/validation-directive.js"></script>
 		  	<script type="text/javascript" src="../src/validation-service.js"></script>
 		  	<script type="text/javascript" src="../src/validation-common.js"></script>

diff --git a/locales/validation/en.json b/locales/validation/en.json
@@ -33,7 +33,7 @@
     "INVALID_EXACT_LEN":                "Must have a length of exactly {0} characters. ",
     "INVALID_FLOAT":                    "May only contain a positive float value (integer excluded). ",
     "INVALID_FLOAT_SIGNED":             "May only contain a positive or negative float value (integer excluded). ",
-    "INVALID_IBAN":                     "Must a valid IBAN. ",
+    "INVALID_IBAN":                     "Must be a valid IBAN. ",
     "INVALID_INPUT_MATCH":              "Confirmation field does not match specified field \"{0}\". ",
     "INVALID_INTEGER":                  "Must be a positive integer. ",
     "INVALID_INTEGER_SIGNED":           "Must be a positive or negative integer. ",
@@ -56,6 +56,7 @@
     "AREA1":                            "TextArea: Alphanumeric + Minimum(15) + Required",
     "ERRORS":                           "Errors",
     "CHANGE_LANGUAGE":                  "Change language",
+    "FORM_PREVALIDATED":                "Form is pre-validated",
     "INPUT1":                           "Remote validation - Type \"abc\" for a valid answer ",
     "INPUT2":                           "Number positive or negative -- input type=\"number\" -- Error on non-numeric characters ",
     "INPUT3":                           "Floating number range (integer excluded) -- between_num:x,y OR min_num:x|max_num:y ",

diff --git a/locales/validation/es.json b/locales/validation/es.json
@@ -56,6 +56,7 @@
     "AREA1":                            "Area de texto: Alfanúmerica + Minimo(15) + Requerido",
     "ERRORS":                           "Errores",
     "CHANGE_LANGUAGE":                  "Cambiar idioma",
+    "FORM_PREVALIDATED":                "La forma es pre-validado",
     "INPUT1":                           "Validación Remota - Escriba \"abc\" para una respuesta válida ",
     "INPUT2":                           "Número positivo o negativo -- input type=\"number\" -- Error o caracteres no númericos ",
     "INPUT3":                           "Rango decimal (Los números enteros no son validos) -- between_num:x,y ó min_num:x|max_num:y ",

diff --git a/locales/validation/fr.json b/locales/validation/fr.json
@@ -56,6 +56,7 @@
     "AREA1":                            "TextArea: Alphanumérique + Minimum(15) + Required",
     "ERRORS":                           "Erreurs",
     "CHANGE_LANGUAGE":                  "Changer de langue",
+    "FORM_PREVALIDATED":                "Formulaire est pré-validé",
     "INPUT1":                           "Validation à Distance - Taper \"abc\" pour une réponse valide ",
     "INPUT2":                           "Nombre positif ou négatif -- input type=\"number\" -- Erreur sur caractères non-numérique",
     "INPUT3":                           "Intervalle de Nombre Flottant (entier exclu) -- between_num:x,y OU min_num:x|max_num:y",

diff --git a/locales/validation/no.json b/locales/validation/no.json
@@ -56,6 +56,7 @@
     "AREA1":                            "TextArea: Alfanumerisk + Minimum(15) + Påkrevd",
     "ERRORS":                           "Feil",
     "CHANGE_LANGUAGE":                  "Endre språk.",
+    "FORM_PREVALIDATED":                "Form er pre-godkjent",
     "INPUT1":                           "Ekstern Validering - Type \"abc\" for et gyldig svar ",
     "INPUT2":                           "Positivt eller negativt nummer -- input type=\"number\" -- Feil på ikke-numeriske tegn ",
     "INPUT3":                           "Flyttalssutvalg (heltall ekskludert) -- between_num:x,y eller min_num:x|max_num:y ",

diff --git a/locales/validation/ru.json b/locales/validation/ru.json
@@ -56,6 +56,7 @@
   "AREA1":                            "TextArea: Буквенно-цифровой + Минимум(15) + Обязательно + Обязательно для заполнения",
   "ERRORS":                           "Ошибки",
   "CHANGE_LANGUAGE":                  "Изменить язык",
+  "FORM_PREVALIDATED":                "Форма предварительно подтверждено",
   "INPUT1":                           "дистанционное проверки - введите \"abc\" для действительного ответа ",
   "INPUT2":                           "Число положительное или отрицательное -- input type=\"number\" -- Ошибка на не числовых значениях ",
   "INPUT3":                           "Диапазон дробного числа (включая целые) -- between_num:x,y или min_num:x|max_num:y ",

diff --git a/more-examples/dynamicForm-app.js → more-examples/dynamic-form/app.js b/more-examples/dynamicForm-app.js → more-examples/dynamic-form/app.js
@@ -4,29 +4,32 @@ var app = angular.module('plunker', ['ui.bootstrap','ghiscoding.validation', 'pa
 
 app.config(['$translateProvider', function ($translateProvider) {
     $translateProvider.useStaticFilesLoader({
-      prefix: '../locales/validation/',
+      prefix: '../../locales/validation/',
       suffix: '.json'
     });
 
     // load English ('en') table on startup
     $translateProvider.preferredLanguage('en');
+  }])
+  .config(['$compileProvider', function ($compileProvider) {
+    $compileProvider.debugInfoEnabled(false);
   }]);
 
-app.directive('formField',function(){
-  return{
+app.directive('formField',function() {
+  return {
     restrict:'E',
-    templateUrl:"dynamicFormView.html"
+    templateUrl:"template.html"
   }
 });
 
 app.controller('MainCtrl', function($scope,validationService) {
   $scope.name = 'World';
   $scope.items={};
-  $scope.items.item1={
+  $scope.items.item1 = {
     heading:"Item1",
     formName:"Form1"
   };
-  $scope.items.item1.fields=[
+  $scope.items.item1.fields = [
    {
       name: 'firstName',
       label:'Enter First Name',
@@ -38,11 +41,11 @@ app.controller('MainCtrl', function($scope,validationService) {
       validation:"required"
     }
   ];
-  $scope.items.item2={
+  $scope.items.item2 = {
     heading:"Item2",
     formName:"Form2"
   };
-  $scope.items.item2.fields=[
+  $scope.items.item2.fields = [
    {
       name: 'email',
       label:'Enter Email Id',
@@ -55,16 +58,19 @@ app.controller('MainCtrl', function($scope,validationService) {
     }
   ];
 
- $scope.validate=function(){
-    for(var key in $scope.items){
+  // redefine which scope to use inside the Angular-Validation
+  $scope.$validationOptions = { isolatedScope: $scope };
+
+  $scope.validate=function() {
+    for(var key in $scope.items) {
       var formName=$scope.items[key].formName;
-      var form = angular.element(document.querySelector('[name="'+formName+'"]'));
-      var childScope = form.scope();
-      console.debug(childScope[formName]);
-      if(new validationService().checkFormValidity(childScope[formName]))
-        alert("form "+formName+" is valid");
-      else
-        alert("form "+formName+" is invalid");
+
+      if(new validationService().checkFormValidity($scope[formName])) {
+        $scope[formName].isValid = true;
+      }
+      else {
+        $scope[formName].isValid = false;
+      }
     }
   };
 });
diff --git a/more-examples/dynamic-form/index.html b/more-examples/dynamic-form/index.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html ng-app="plunker">
+    <head>
+        <meta charset="utf-8" />
+        <title>AngularJS Plunker</title>
+        <script>document.write('<base href="' + document.location + '" />');</script>
+        <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
+      	<link rel="stylesheet" href="../../style.css">
+    </head>
+
+    <body ng-controller="MainCtrl">
+      <div class="container">
+        <br/>
+        <div class="alert alert-info alert-dismissable">
+            <span class="glyphicon glyphicon-link" aria-hidden="true"></span>
+            <a href="https://github.com/ghiscoding/angular-validation/wiki/Isolated-Scope">Wiki - Isolated Scope</a>
+            <br/>
+            <span class="glyphicon glyphicon-link" aria-hidden="true"></span>
+            <a href="https://github.com/ghiscoding/angular-validation/wiki/Form-Submit-and-Validation">Wiki - Form Submit and Validation</a>
+        </div>
+
+        <h3>Form Validation (with dynamic form and fields)</h3>
+        <tabset>
+          <tab ng-repeat="tab in items" heading="{{tab.heading}}" id="{{tab.heading}}" >
+             <form name="{{tab.formName}}" novalidate>
+               <div ng-repeat="field in tab.fields" >
+                 <form-field></form-field>
+               </div>
+             </form>
+          </tab>
+        </tabset>
+        <button name="validateForms" value="Validate" ng-click="validate()">Validate</button>
+
+        <hr/>
+
+        <div>
+          <h4>Forms are Valid after Submit</h4>
+          <span><label>Form1 isValid:</label> {{ Form1.isValid }} </span><br/>
+          <span><label>Form2 isValid:</label> {{ Form2.isValid }} </span>
+        </div>
+      </div>
+        <!-- external librairies CDN -->
+        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
+        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.js"></script>
+        <script type="text/javascript" src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script>
+
+        <!-- angular-translate -->
+        <!-- Visit Angular-Translate https://github.com/PascalPrecht/angular-translate -->
+        <script src="../../vendors/angular-translate/angular-translate.min.js"></script>
+        <script src="../../vendors/angular-translate/angular-translate-loader-static-files.min.js"></script>
+
+        <!-- Angular-Validation -->
+        <script type="text/javascript" src="../../dist/angular-validation.min.js"></script>
+        <!--
+        <script type="text/javascript" src="../../src/validation-directive.js"></script>
+        <script type="text/javascript" src="../../src/validation-service.js"></script>
+        <script type="text/javascript" src="../../src/validation-common.js"></script>
+        <script type="text/javascript" src="../../src/validation-rules.js"></script>
+        -->
+
+        <script src="app.js"></script>
+    </body>
+
+</html>
diff --git a/more-examples/dynamicFormView.html → more-examples/dynamic-form/template.html b/more-examples/dynamicFormView.html → more-examples/dynamic-form/template.html
diff --git a/more-examples/dynamicInput-app.js → more-examples/dynamic-input/app.js b/more-examples/dynamicInput-app.js → more-examples/dynamic-input/app.js
@@ -4,7 +4,7 @@ var myApp = angular.module('myApp', ['ngRoute', 'pascalprecht.translate', 'ghisc
 
 myApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
     $routeProvider.when('/dynamic', {
-          templateUrl: 'dynamicInputTemplate.html',
+          templateUrl: 'template.html',
           controller: 'CtrlDynamic'
     });
     $routeProvider.otherwise({
@@ -13,7 +13,7 @@ myApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $
   }])
 	.config(['$translateProvider', function ($translateProvider) {
 	  $translateProvider.useStaticFilesLoader({
-	    prefix: '../locales/validation/',
+	    prefix: '../../locales/validation/',
 	    suffix: '.json'
 		});
 

diff --git a/more-examples/dynamicInputIndex.html → more-examples/dynamic-input/index.html b/more-examples/dynamicInputIndex.html → more-examples/dynamic-input/index.html
@@ -4,7 +4,7 @@
 	  <meta charset="utf-8">
 	  <title>Angular-Validation</title>
 	  <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
-	  <link rel="stylesheet" href="../style.css">
+	  <link rel="stylesheet" href="../../style.css">
 	</head>
 
 	<body>
@@ -27,18 +27,19 @@ <h3 class="text-info">{{'CHANGE_LANGUAGE' | translate}}</h3>
 
 			<!-- angular-translate -->
 			<!-- Visit Angular-Translate https://github.com/PascalPrecht/angular-translate -->
-			<script src="../vendors/angular-translate/angular-translate.min.js"></script>
-			<script src="../vendors/angular-translate/angular-translate-loader-static-files.min.js"></script>
+			<script src="../../vendors/angular-translate/angular-translate.min.js"></script>
+			<script src="../../vendors/angular-translate/angular-translate-loader-static-files.min.js"></script>
 
 			<!-- Angular-Validation -->
-		  	<script type="text/javascript" src="../dist/angular-validation.min.js"></script>
-		  	<!--<script type="text/javascript" src="../src/validation-directive.js"></script>
-			<script type="text/javascript" src="../src/validation-service.js"></script>
-		  	<script type="text/javascript" src="../src/validation-common.js"></script>
-		  	<script type="text/javascript" src="../src/validation-rules.js"></script>-->
+		  	<script type="text/javascript" src="../../dist/angular-validation.min.js"></script>
+
+		  	<!--<script type="text/javascript" src="../../src/validation-directive.js"></script>
+			<script type="text/javascript" src="../../src/validation-service.js"></script>
+		  	<script type="text/javascript" src="../../src/validation-common.js"></script>
+		  	<script type="text/javascript" src="../../src/validation-rules.js"></script>-->
 
 			<!-- my application -->
-		  	<script type="text/javascript" src="dynamicInput-app.js"></script>
+		  	<script type="text/javascript" src="app.js"></script>
 	  	</div>
   	</body>
 </html>
diff --git a/more-examples/dynamicInputTemplate.html → more-examples/dynamic-input/template.html b/more-examples/dynamicInputTemplate.html → more-examples/dynamic-input/template.html
diff --git a/more-examples/dynamicFormIndex.html b/more-examples/dynamicFormIndex.html
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-validation-ghiscoding",
-  "version": "1.3.26",
+  "version": "1.3.27",
   "author": "Ghislain B.",
   "description": "Angular-Validation Directive and Service (ghiscoding)",
   "main": "app.js",