Fixed issue #91, enhancements #97 and #98

ghiscoding · Dec 21, 2015 · 450d4fb · 450d4fb
1 parent fe72fc9
commit 450d4fb
Show file tree

Hide file tree

Showing 17 changed files with 669 additions and 96 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-validation-ghiscoding",
-  "version": "1.4.17",
+  "version": "1.4.18",
   "author": "Ghislain B.",
   "description": "Angular-Validation Directive and Service (ghiscoding)",
   "main": [

diff --git a/changelog.txt b/changelog.txt
@@ -1,5 +1,6 @@
 Angular-Validation change logs
 
+1.4.18 (2015-12-20) Fixed issue #91 interpolation problem with remove validation doesn't work twice. Enhancement #98 possibility to use one validation or another (tell how many Validators are required for field to become valid). Enhancement #97 possibility to validate even on empty text field (useful on `custom` and `remote` validation). Refined some Validators (IPV6 now include compressed/uncompressed addresses, added more Polish characters to other Validators)
 1.4.17 (2015-12-15) Fixed issue #92 input name with '.', enhancement #94 Polish characters, issue #96 in_list wasn't accepting special characters.
 1.4.16 (2015-12-11) Fixed issue #90 blinking error messages.
 1.4.15 (2015-12-02) Fixed issue #86 implicit global variable on regex.

diff --git a/dist/angular-validation.min.js b/dist/angular-validation.min.js
diff --git a/more-examples/customValidationOnEmptyField/app.js b/more-examples/customValidationOnEmptyField/app.js
@@ -0,0 +1,101 @@
+'use strict';
+
+var myApp = angular.module('emptyCustomValidation', ['ghiscoding.validation', 'pascalprecht.translate',
+  'emptyCustomValidation.controllers']);
+// --
+// 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');
+	}]);
+
+
+myApp.run(function ($rootScope) {
+    $rootScope.$validationOptions = { debounce: 0 };
+});
+
+angular.module('emptyCustomValidation.controllers', []).
+controller('myController', function($scope, validationService) {
+    $scope.existingEmployees = [
+      {
+        firstName: 'John',
+        lastName: 'Doe',
+        id: 1
+      },
+      {
+        firstName: 'Jane',
+        lastName: 'Doe',
+        id: 2
+      }];
+    $scope.newEmployees = [
+      {firstName : '', lastName: '', id : -1},
+      {firstName : '', lastName: '', id : -2},
+      {firstName : '', lastName: '', id : -3},
+      {firstName : '', lastName: '', id : -4},
+      {firstName : '', lastName: '', id : -5}
+    ];
+
+    $scope.submit = function() {
+       if (!new validationService().checkFormValidity($scope.inputForm)) {
+          var msg = '';
+          $scope.inputForm.$validationSummary.forEach(function (validationItem) {
+            msg += validationItem.message + '\n';
+          });
+          alert(msg);
+          return;
+      }
+      alert('Data saved successfully.');
+    };
+
+    function employeeHasData(employee)
+    {
+      if ((!employee.firstName || employee.firstName === '') && (!employee.lastName || employee.lastName === ''))
+        return false;
+      return true;
+    }
+    $scope.newEmployeeFirstNameValidation = function(employee) {
+      //alert('First name validation');
+      var isValid = true;
+      var msg = '';
+      if (employeeHasData(employee) && !employee.firstName)
+      {
+        isValid = false;
+        msg = 'First name required';
+      }
+
+      // The next 4 lines are only here to show that custom validation works if text is given
+      if (isValid && employee.firstName && employee.firstName.length > 10)
+      {
+        isValid = false;
+        msg = 'Max number of characters for first name: 10'
+      }
+
+      return { isValid: isValid, message: msg };
+    };
+
+    $scope.newEmployeeLastNameValidation = function(employee) {
+      var isValid = true;
+      var msg = '';
+      if (employeeHasData(employee) && !employee.lastName)
+      {
+        isValid = false;
+        msg = 'Last name required';
+      }
+
+      // The next 4 lines are only here to show that custom validation works if text is given
+      if (isValid && employee.lastName && employee.lastName.length > 8)
+      {
+        isValid = false;
+        msg = 'Max number of characters for last name: 8'
+      }
+      return { isValid: isValid, message: msg };
+    };
+});
diff --git a/more-examples/customValidationOnEmptyField/index.html b/more-examples/customValidationOnEmptyField/index.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Angular-Validation with Custom Javascript function</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 ng-app="emptyCustomValidation" ng-controller="myController">
+    <div class="container">
+      <form name="inputForm" ng-submit="submit()">
+        <h1>Employess in db</h1>
+        <table>
+          <tbody>
+            <tr>
+              <th>First name</th>
+              <th>Last name</th>
+            </tr>
+            <tr ng-repeat="employee in existingEmployees">
+              <td>
+                <input type="text" name="existingEmployee_firstName_{{employee.id}}" ng-model="employee.firstName" validation="required" class="form-control" />
+              </td>
+              <td>
+                <input type="text" name="existingEmployee_lastName_{{employee.id}}" ng-model="employee.lastName" validation="required" class="form-control" />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <br />
+        <br />
+        <br />
+        <h1>New employees</h1>
+        <table>
+          <tbody>
+            <tr>
+              <th>First name</th>
+              <th>Last name</th>
+            </tr>
+            <tr ng-repeat="employee in newEmployees">
+              <td>
+                <input type="text" name="newEmployee_firstName_{{employee.id}}" ng-model="employee.firstName" validation="custom:newEmployeeFirstNameValidation(employee)" validate-on-empty="true" class="form-control" />
+              </td>
+              <td>
+                <input type="text" name="newEmployee_lastName_{{employee.id}}" ng-model="employee.lastName" validation="custom:newEmployeeLastNameValidation(employee)" class="form-control" />
+              </td>
+            </tr>
+          </tbody>
+        </table><br /><br /><br />
+        <button class="btn btn-default">
+          Submit
+        </button>
+        </form>
+    </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/validRequireHowMany/app.js b/more-examples/validRequireHowMany/app.js
@@ -0,0 +1,56 @@
+'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', ['validationService', function (validationService) {
+  var vmd = this;
+  vmd.model = {};
+
+  // use the validationService only to declare the controllerAs syntax
+  var vs = new validationService({ controllerAs: vmd });
+
+  vmd.submitForm = function() {
+    if(vs.checkFormValidity(vmd.form1)) {
+      alert('All good, proceed with submit...');
+    }
+  }
+}]);
+
+// --
+// Service
+myApp.controller('CtrlService', ['$scope', 'validationService', function ($scope, validationService) {
+  var vms = this;
+  vms.model = {};
+
+  // use the validationService only to declare the controllerAs syntax
+  var vs = new validationService({ controllerAs: vms });
+
+  vs.addValidator({
+    elmName: 'input2',
+    validRequireHowMany: 2,
+    scope: $scope,
+    rules: 'ipv4|ipv6|required'
+  });
+
+  vms.submitForm = function() {
+    if(new validationService().checkFormValidity(vms.form2)) {
+      alert('All good, proceed with submit...');
+    }
+  }
+}]);
diff --git a/more-examples/validRequireHowMany/index.html b/more-examples/validRequireHowMany/index.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html ng-app="myApp" ng-strict-di ng-cloak="">
+  <head>
+    <meta charset="utf-8" />
+    <title>Angular-Validation with ValidRequireHowMany</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>Angular-Validation with ValidRequireHowMany</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">
+            <label for="input1">Validate IPV4 or IPV6 (required + IPV4 or IPV6 --&gt; validRequireHowMany="2")</label>
+            <input type="text" class="form-control"
+              name="input1"
+              ng-model="vmd.model.input1"
+              placeholder="validation='ipv4|ipv6|required' ... validRequireHowMany='2'"
+              valid-require-how-many="2"
+              validation="ipv4|ipv6|required" />
+          </div>
+          <br/>
+          <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">
+            <label for="input2">Validate IPV4 or IPV6 (required + IPV4 or IPV6 --&gt; validRequireHowMany="2")</label>
+            <input type="text" class="form-control"
+              name="input2"
+              ng-model="vms.model.input2"
+              placeholder="validation='ipv4|ipv6|required' ... validRequireHowMany='2'"
+              valid-require-how-many="2" />
+          </div>
+          <br/>
+          <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/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-validation-ghiscoding",
-  "version": "1.4.17",
+  "version": "1.4.18",
   "author": "Ghislain B.",
   "description": "Angular-Validation Directive and Service (ghiscoding)",
   "main": "app.js",

diff --git a/protractor/conf.js b/protractor/conf.js
@@ -32,6 +32,7 @@
     'interpolate_spec.js',
     'ngIfDestroy_spec.js',
     'thirdParty_spec.js',
+    'validRequireHowMany_spec.js',
     'full_tests_spec.js'
   ],
   jasmineNodeOpts: {