Enhancement #34 to add Remote Validation

- Enhancement #34 to add Remote Validation
- Updated Protractor to cover this new Remote Validation

Author: ghiscoding

app.js

@@ -37,7 +37,7 @@ myApp.controller('Ctrl', ['$location', '$route', '$scope', '$translate', functio
 
 // -- Controller to use Angular-Validation Directive
 // -----------------------------------------------
-myApp.controller('CtrlValidationDirective', ['$scope', 'validationService', function ($scope, validationService) {
+myApp.controller('CtrlValidationDirective', ['$q', '$scope', 'validationService', function ($q, $scope, validationService) {
   $scope.$validationOptions = { debounce: 1500 }; // you can change default debounce globally
 
   $scope.submitForm = function() {
@@ -48,6 +48,20 @@ myApp.controller('CtrlValidationDirective', ['$scope', 'validationService', func
   $scope.showValidationSummary = function () {
     $scope.displayValidationSummary = true;
   }
+  $scope.customRemoteValidationCall = function() {
+    var deferred = $q.defer();
+    setTimeout(function() {
+      var isValid = ($scope.input1 === "abc") ? true : false;
+
+      // you can return a boolean for isValid
+      //deferred.resolve(isValid);
+
+      // or you can return an object as { isValid: bool, message: msg }
+      deferred.resolve({ isValid: isValid, message: 'Returned error from promise.'});
+    }, 1000);
+
+    return deferred.promise;
+  }
 }]);
 
 // -- Controller to use Angular-Validation Directive with 2 forms
@@ -67,18 +81,18 @@ myApp.controller('Ctrl2forms', ['$scope', 'validationService', function ($scope,
 // -----------------------------------------------
 
 // exact same testing form used except that all validators are programmatically added inside controller via Angular-Validation Service
-myApp.controller('CtrlValidationService', ['$scope', '$translate', 'validationService', function ($scope, $translate, validationService) {
+myApp.controller('CtrlValidationService', ['$q', '$scope', '$translate', 'validationService', function ($q, $scope, $translate, validationService) {
   // start by creating the service
   var myValidation = new validationService();
 
   // you can create indepent call to the validation service
   // also below the multiple properties available
   myValidation.addValidator({
-    elmName: 'input2',
+    elmName: 'input1',
     // friendlyName: $translate.instant('FIRST_NAME'),
-    debounce: 3000,
+    debounce: 1000,
     scope: $scope,
-    rules: 'numeric_signed|required'
+    rules: 'alpha|min_len:2|remote:customRemoteValidationCall|required'
   });
 
   // you can also chain validation service and add multiple validators at once
@@ -90,6 +104,7 @@ myApp.controller('CtrlValidationService', ['$scope', '$translate', 'validationSe
   // the available object properties are the exact same set as the directive except that they are camelCase
   myValidation
     .setGlobalOptions({ debounce: 1500, scope: $scope })
+    .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')
     .addValidator('input5', 'email|required|min_len:6', $translate.instant('INPUT5')) // 3rd argument being the Friendly name
@@ -125,6 +140,15 @@ myApp.controller('CtrlValidationService', ['$scope', '$translate', 'validationSe
       alert('All good, proceed with submit...');
     }
   }
+  $scope.customRemoteValidationCall = function() {
+    var deferred = $q.defer();
+    setTimeout(function() {
+      var isValid = ($scope.input1 === "abc") ? true : false;
+      deferred.resolve({ isValid: isValid, message: 'Returned error from promise.'});
+    }, 1000);
+
+    return deferred.promise;
+  }
 }]);
 
 // -- Controller to use Angular-Validation with Directive and ngRepeat

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-validation-ghiscoding",
-  "version": "1.3.24",
+  "version": "1.3.25",
   "author": "Ghislain B.",
   "description": "Angular-Validation Directive and Service (ghiscoding)",
   "main": [
@@ -18,11 +18,13 @@
   "license": "MIT",
   "ignore": [
     "**/.*",
+    "full-tests",
     "node_modules",
     "bower_components",
     "test",
     "tests",
     "more-examples",
+    "protractor",
     "templates",
     "app.js",
     "changelog.txt",

changelog.txt

@@ -25,4 +25,5 @@ Angular-Validation change logs
 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.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.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.

dist/angular-validation.min.js

@@ -26,8 +26,8 @@ <h1>Angular-Validation Directive|Service (ghiscoding)</h1>
 
 			<span class="text-info" style="margin-left: 20px"><strong>Type: </strong></span>
 			<div class="btn-group btn-group-sm">
-				<button type="button" name="btn_goto_directive" class="btn btn-default" ng-click="goto('/validate-directive')">Directive</button>
-				<button type="button" name="btn_goto_service" class="btn btn-default" ng-click="goto('/validate-service')">Service</button>
+				<button type="button" name="btn_goto_Directive" class="btn btn-default" ng-click="goto('/validate-directive')">Directive</button>
+				<button type="button" name="btn_goto_Service" class="btn btn-default" ng-click="goto('/validate-service')">Service</button>
 				<button type="button" name="btn_goto_2forms" class="btn btn-default" ng-click="goto('/validate-2forms')">2 Forms</button>
 				<button type="button" name="btn_goto_ngrepeat" class="btn btn-default" ng-click="goto('/validate-ngRepeat')">ngRepeat</button>
 			</div>

index.html

@@ -56,6 +56,7 @@
     "AREA1":                            "TextArea: Alphanumeric + Minimum(15) + Required",
     "ERRORS":                           "Errors",
     "CHANGE_LANGUAGE":                  "Change language",
+    "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 ",
     "INPUT4":                           "Multiple Validations + Custom Regex of Date Code (YYWW)",

locales/validation/en.json

@@ -56,6 +56,7 @@
     "AREA1":                            "Area de texto: Alfanúmerica + Minimo(15) + Requerido",
     "ERRORS":                           "Errores",
     "CHANGE_LANGUAGE":                  "Cambiar idioma",
+    "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 ",
     "INPUT4":                           "Multiples validaciones + Código de fecha personalizado (YYWW)",

locales/validation/es.json

@@ -56,6 +56,7 @@
     "AREA1":                            "TextArea: Alphanumérique + Minimum(15) + Required",
     "ERRORS":                           "Erreurs",
     "CHANGE_LANGUAGE":                  "Changer de langue",
+    "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",
     "INPUT4":                           "Multiple Validations + Regex Personnalisé d'un Code Date (AASS)",

locales/validation/fr.json

@@ -56,6 +56,7 @@
     "AREA1":                            "TextArea: Alfanumerisk + Minimum(15) + Påkrevd",
     "ERRORS":                           "Feil",
     "CHANGE_LANGUAGE":                  "Endre språk.",
+    "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 ",
     "INPUT4":                           "Multiple Valideringer + Tilpasset Regex av dato kode (YYWW)",

locales/validation/no.json

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