Added validation-callback (#79), added #81, #82

- Added new validation-callback attribute, runs after the debounce/blur and validaiton are completed - Added possibility passing arguments to Custom & Remote validators - Added new Global Options: hideErrorUnderInputs
ghiscoding · Nov 15, 2015 · 9fcd5f8 · 9fcd5f8
1 parent ebd9cfc
commit 9fcd5f8
Show file tree

Hide file tree

Showing 20 changed files with 735 additions and 108 deletions.
diff --git a/app.js b/app.js
@@ -117,7 +117,7 @@ myApp.controller('CtrlValidationService', ['$q', '$scope', '$translate', 'valida
     // friendlyName: $translate.instant('FIRST_NAME'),
     debounce: 1000,
     scope: $scope,
-    rules: 'alpha|min_len:2|remote:customRemoteValidationCall|required'
+    rules: 'alpha|min_len:2|remote:customRemoteValidationCall()|required'
   });
 
   // you can also chain validation service and add multiple validators at once

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

diff --git a/dist/angular-validation.min.js b/dist/angular-validation.min.js
diff --git a/more-examples/customRemote/app.js b/more-examples/customRemote/app.js
@@ -0,0 +1,93 @@
+'use strict';
+
+var myApp = angular.module('myApp', ['ghiscoding.validation', 'pascalprecht.translate', 'ui.bootstrap']);
+// --
+// configuration
+myApp.config(['$compileProvider', function ($compileProvider) {
+    $compileProvider.debugInfoEnabled(false);
+  }])
+	.config(['$translateProvider', function ($translateProvider) {
+	  $translateProvider.useStaticFilesLoader({
+      prefix: '../../locales/validation/',
+      suffix: '.json'
+    });
+  	// load English ('en') table on startup
+		$translateProvider.preferredLanguage('en').fallbackLanguage('en');
+    $translateProvider.useSanitizeValueStrategy('escapeParameters');
+	}]);
+
+// --
+// Directive
+myApp.controller('CtrlDirective', ['$q', 'validationService', function ($q, validationService) {
+  var vmd = this;
+  vmd.model = {};
+
+  // use the validationService only to declare the controllerAs syntax
+  var vs = new validationService({ controllerAs: vmd, debounce: 500 });
+
+  vmd.myRemoteValidation1 = function() {
+    var deferred = $q.defer();
+    setTimeout(function() {
+      var isValid = (vmd.model.input1 === "abc") ? true : false;
+      deferred.resolve({ isValid: isValid, message: 'Returned error from promise.'});
+    }, 500);
+
+    return deferred.promise;
+  }
+
+  vmd.myRemoteValidation2 = function() {
+    var deferred = $q.defer();
+    setTimeout(function() {
+      var isValid = (vmd.model.input2 === "def") ? true : false;
+      deferred.resolve({ isValid: isValid, message: 'Returned error from promise.'});
+    }, 500);
+
+    return deferred.promise;
+  }
+
+  vmd.submitForm = function() {
+    if(vs.checkFormValidity(vmd.form1)) {
+      alert('All good, proceed with submit...');
+    }
+  }
+}]);
+
+// --
+// Service
+myApp.controller('CtrlService', ['$scope', '$q', 'validationService', function ($scope, $q, validationService) {
+  var vms = this;
+  vms.model = {};
+
+  // use the validationService only to declare the controllerAs syntax
+  var vs = new validationService({ controllerAs: vms, debounce: 500 });
+
+  vs.setGlobalOptions({ scope: $scope })
+    .addValidator('input3', 'alpha|min_len:2|remote:vms.myRemoteValidation3():alt=Alternate error message.|required')
+    .addValidator('input4', 'alpha|min_len:2|remote:vms.myRemoteValidation4()|required');
+
+  vms.myRemoteValidation3 = function() {
+    var deferred = $q.defer();
+    setTimeout(function() {
+      var isValid = (vms.model.input3 === "abc") ? true : false;
+      deferred.resolve({ isValid: isValid, message: 'Returned error from promise.'});
+    }, 500);
+
+    return deferred.promise;
+  }
+
+  vms.myRemoteValidation4 = function() {
+    var deferred = $q.defer();
+    setTimeout(function() {
+      var isValid = (vms.model.input4 === "def") ? true : false;
+      deferred.resolve({ isValid: isValid, message: 'Returned error from promise.'});
+    }, 500);
+
+    return deferred.promise;
+  }
+
+  vms.submitForm = function() {
+    if(new validationService().checkFormValidity(vms.form2)) {
+      alert('All good, proceed with submit...');
+    }
+  }
+}]);
diff --git a/more-examples/customRemote/index.html b/more-examples/customRemote/index.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html ng-app="myApp" ng-strict-di ng-cloak="">
+  <head>
+    <meta charset="utf-8" />
+    <title>Angular-Validation with Remote Validation</title>
+    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
+        <link rel="stylesheet" href="../../style.css">
+  </head>
+
+  <body>
+    <div class="container">
+      <h2>Example of Angular-Validation with Remote Validation</h2>
+
+      <div  ng-controller="CtrlDirective as vmd">
+        <h3>Directive</h3>
+        <div class="alert alert-danger alert-dismissable" ng-show="vmd.form1.$validationSummary.length &gt; 0">
+          <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+          <h4><strong>ERRORS!</strong></h4>
+          <ul>
+              <li ng-repeat="item in vmd.form1.$validationSummary">{{ item.field }}: {{item.message}}</li>
+          </ul>
+        </div>
+
+        <form name="vmd.form1">
+          <div class="form-group">
+            <p>Type '<b>abc</b>' for a valid answer </p>
+            <label for="input1">Remote Validation (error msg using alt:)</label>
+            <input type="text" class="form-control"
+              name="input1"
+              ng-model="vmd.model.input1"
+              placeholder="alpha|min_len:2|remote:vmd.myRemoteValidation1|required"
+              validation="alpha|min_len:2|remote:vmd.myRemoteValidation1:alt=Alternate error message.|required" />
+              <span ng-if="vmd.form1.input1.$processing">
+                <span class="glyphicon glyphicon-refresh spinning"></span>
+              </span>
+          </div>
+          <br/>
+          <div class="form-group">
+            <p>Type '<b>def</b>' for a valid answer </p>
+            <label for="input2">Remote Validation (error msg declared in custom function)</label>
+            <!-- same as previous but defined as `javascript` and error message is declared directly in the custom function -->
+            <input type="text" class="form-control"
+              name="input2"
+              ng-model="vmd.model.input2"
+              placeholder="alpha|min_len:2|remote:vmd.myRemoteValidation2()|required"
+              validation="alpha|min_len:2|remote:vmd.myRemoteValidation2()|required" />
+              <span ng-if="vmd.form1.input2.$processing">
+                <span class="glyphicon glyphicon-refresh spinning"></span>
+              </span>
+          </div>
+          <div class="form-actions">
+            <button type="submit" name="btn_ngDisabled1" class="btn btn-primary" ng-disabled="vmd.form1.$invalid" >{{ 'SAVE' | translate }} (ngDisabled)</button>
+            <button type="submit" name="btn_ngSubmit1" class="btn btn-primary" ng-click="vmd.submitForm()">{{ 'SAVE' | translate }} (ngSubmit)</button>
+          </div>
+        </form>
+        </div>
+
+      <hr/>
+
+      <div  ng-controller="CtrlService as vms">
+        <h3>Service</h3>
+        <div class="alert alert-danger alert-dismissable" ng-show="vms.form2.$validationSummary.length &gt; 0">
+          <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+          <h4><strong>ERRORS!</strong></h4>
+          <ul>
+              <li ng-repeat="item in vms.form2.$validationSummary">{{ item.field }}: {{item.message}}</li>
+          </ul>
+        </div>
+
+        <form name="vms.form2">
+          <div class="form-group">
+            <p>Type '<b>abc</b>' for a valid answer </p>
+            <label for="input3">Remote Validation (error msg using alt:)</label>
+            <input type="text" class="form-control"
+              name="input3"
+              ng-model="vms.model.input3"
+              placeholder="alpha|min_len:2|remote:vms.myRemoteValidation3()|required" />
+              <span ng-if="vms.form2.input3.$processing">
+                <span class="glyphicon glyphicon-refresh spinning"></span>
+              </span>
+          </div>
+          <br/>
+          <div class="form-group">
+            <p>Type '<b>def</b>' for a valid answer </p>
+            <label for="input4">Remote Validation (error msg declared in custom function)</label>
+            <!-- same as previous but defined as `javascript` and error message is declared directly in the custom function -->
+            <input type="text" class="form-control"
+              name="input4"
+              ng-model="vms.model.input4"
+              placeholder="alpha|min_len:2|remote:vms.myRemoteValidation4()|required" />
+              <span ng-if="vms.form2.input4.$processing">
+                <span class="glyphicon glyphicon-refresh spinning"></span>
+              </span>
+          </div>
+          <div class="form-actions">
+            <button type="submit" name="btn_ngDisabled2" class="btn btn-primary" ng-disabled="vms.form2.$invalid" >{{ 'SAVE' | translate }} (ngDisabled)</button>
+            <button type="submit" name="btn_ngSubmit2" class="btn btn-primary" ng-click="vms.submitForm()">{{ 'SAVE' | translate }} (ngSubmit)</button>
+          </div>
+        </form>
+      </div>
+    </div>
+
+    <!-- external librairies CDN -->
+    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
+    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.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-UI -->
+    <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.2.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>
+    -->
+
+    <!-- my application -->
+    <script type="text/javascript" src="app.js"></script>
+  </body>
+</html>
diff --git a/more-examples/customValidation/app.js b/more-examples/customValidation/app.js
@@ -49,7 +49,7 @@ myApp.controller('CtrlDirective', ['validationService', function (validationServ
 myApp.controller('CtrlService', ['$scope', 'validationService', function ($scope, validationService) {
   var vms = this;
   vms.model = {};
-  //vms.model.input3 = 'a';
+
   // use the validationService only to declare the controllerAs syntax
   var vs = new validationService({ controllerAs: vms });
 

diff --git a/more-examples/customValidation/index.html b/more-examples/customValidation/index.html
@@ -9,9 +9,9 @@
 
   <body>
     <div class="container">
-      <div  ng-controller="CtrlDirective as vmd">
-        <h2>Example of Angular-Validation with Custom Javascript function</h2>
+      <h2>Example of Angular-Validation with Custom Javascript function</h2>
 
+      <div  ng-controller="CtrlDirective as vmd">
         <h3>Directive</h3>
         <div class="alert alert-danger alert-dismissable" ng-show="vmd.form1.$validationSummary.length &gt; 0">
           <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>

diff --git a/more-examples/validationCallback/app.js b/more-examples/validationCallback/app.js
@@ -0,0 +1,36 @@
+'use strict';
+
+var myApp = angular.module('myApp', ['ngRoute', 'ngSanitize', 'ghiscoding.validation', 'pascalprecht.translate']);
+myApp.config(['$compileProvider', '$locationProvider', '$routeProvider', function ($compileProvider, $locationProvider, $routeProvider) {
+    $compileProvider.debugInfoEnabled(false);
+  }])
+.config(['$translateProvider', function ($translateProvider) {
+    $translateProvider.useStaticFilesLoader({
+      prefix: '../../locales/validation/',
+      suffix: '.json'
+    });
+    // load English ('en') table on startup
+    $translateProvider.preferredLanguage('en').fallbackLanguage('en');
+    $translateProvider.useSanitizeValueStrategy('escapeParameters');
+  }]);
+
+
+
+myApp.controller('ctrlDirective', [function () {
+ var vmd = this;
+
+ vmd.onChange = function(index) {
+    vmd.formValid1 = vmd.form1.$valid;
+    vmd.fullName1 = vmd.firstName1 + ' ' + vmd.lastName1;
+    return index;
+ }
+}]);
+
+myApp.controller('ctrlService', [function () {
+ var vms = this;
+
+ vms.onChange = function() {
+    vms.formValid2 = vms.form2.$valid;
+    vms.fullName2 = vms.firstName2 + ' ' + vms.lastName2;
+ }
+}]);
diff --git a/more-examples/validationCallback/index.html b/more-examples/validationCallback/index.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html ng-app="myApp">
+
+  <head>
+    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
+    <link rel="stylesheet" href="../../style.css">
+  </head>
+
+  <body>
+    <div class="container">
+      <h2>Example of Validation Callback</h2>
+
+      <div  ng-controller="ctrlDirective as vmd">
+        <h3>Directive</h3>
+
+        <form name="vmd.form1" role="form"novalidate>
+          <label>First name :</label>
+          <input type="text" name="firstName1" ng-model="vmd.firstName1" validation-callback="vmd.onChange" validation="required:alt=First name is required">
+          <label>Last name :</label>
+          <input type="text" name="lastName1" ng-model="vmd.lastName1" validation="required:alt=Last name is required" validation-callback="vmd.onChange()">
+          <button type="submit" name="btn_ngDisabled1" class="btn btn-primary" ng-disabled="vmd.form1.$invalid" >Save</button>
+        </form>
+
+        <strong>Callback results</strong>
+        <div>
+          Form is valid: {{ vmd.formValid1 }}
+        </div>
+        <div>
+          Full Name: {{ vmd.fullName1 }}
+        </div>
+      </div>
+
+      <hr/>
+
+      <div  ng-controller="ctrlService as vms">
+        <h3>Service</h3>
+
+        <form name="vms.form2" role="form"novalidate>
+          <label>First name :</label>
+          <input type="text" name="firstName2" ng-model="vms.firstName2" validation-callback="vms.onChange()" validation="required:alt=First name is required">
+          <label>Last name :</label>
+          <input type="text" name="lastName2" ng-model="vms.lastName2" validation="required:alt=Last name is required" validation-callback="vms.onChange()">
+          <button type="submit" name="btn_ngDisabled2" class="btn btn-primary" ng-disabled="vms.form2.$invalid" >Save</button>
+        </form>
+
+        <strong>Callback results</strong>
+        <div>
+          Form is valid: {{ vms.formValid2 }}
+        </div>
+        <div>
+          Full Name: {{ vms.fullName2 }}
+        </div>
+      </div>
+
+    </div>
+    <!-- external librairies CDN -->
+    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
+    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script>
+    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-sanitize.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-UI -->
+    <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.2.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>
+    -->
+
+    <!-- my application -->
+    <script type="text/javascript" src="app.js"></script>
+  </body>
+
+</html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-validation-ghiscoding",
-  "version": "1.4.13",
+  "version": "1.4.14",
   "author": "Ghislain B.",
   "description": "Angular-Validation Directive and Service (ghiscoding)",
   "main": "app.js",