Fixed issue #121 alternate text containing char ":"

The char ":" is used for splitting arguments in validation, but it shouldn't be split when it is part of an alternate text.
ghiscoding · Jun 15, 2016 · 2f8570b · 2f8570b
1 parent 30e5f75
commit 2f8570b
Show file tree

Hide file tree

Showing 7 changed files with 140 additions and 10 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-validation-ghiscoding",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "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/ngModelOptionBlur/app.js b/more-examples/ngModelOptionBlur/app.js
@@ -0,0 +1,36 @@
+'use strict';
+
+var myApp = angular.module('myApp', ['ghiscoding.validation', 'pascalprecht.translate']);
+// --
+// 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.input6 = "initialInput6";
+  vmd.mylocation = { Name: "initialName", Name2: "initialName", Simple: "initialName" };
+
+  vmd.submitForm = function() {
+    if(vs.checkFormValidity(vmd.form1)) {
+      alert('All good, proceed with submit...');
+    }
+  }
+}]);
diff --git a/more-examples/ngModelOptionBlur/index.html b/more-examples/ngModelOptionBlur/index.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html ng-app="myApp" ng-strict-di ng-cloak="">
+  <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>
+    <div class="container">
+      <h2>Example of Angular-Validation with Custom Javascript function</h2>
+
+      <div  ng-controller="CtrlDirective as Location">
+        <div class="row">
+        <div>
+            <form class="form-horizontal" name="locationForm" novalidate ng-model-options="{ updateOn: 'blur' }">
+
+                <section class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
+                    <label class="labels" for="name">Name *</label>
+                    <input type="text"
+                           name="name"
+                           id="name"
+                           validation="required|max_len:50"
+                           debounce="0"
+                           ng-model="Location.mylocation.Name"
+                           class="form-control input-lg input-full"
+                           placeholder="Enter Location Name">
+                </section>
+                <section class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
+                    <label class="labels" for="name">Simple Input *</label>
+                    <input type="text"
+                           name="simple"
+                           id="simple"
+                           validation="required|max_len:50"
+                           debounce="0"
+                           ng-model="Location.mylocation.Simple" />
+                </section>
+            </form>
+            <h3>Control below NOT in a form, doesn't have problem</h3>
+            <!--// NOT in form-->
+            <section class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
+                <label class="labels" for="name2">Name2 *</label>
+                <input type="text"
+                       name="name2"
+                       id="name2"
+                       validation="required:alt=Please Enter Name|max_len:50"
+                       debounce="0"
+                       ng-model="Location.mylocation.Name2"
+                       class="form-control input-lg input-full"
+                       placeholder="Enter Location Name">
+            </section>
+
+        </div>
+    </div>
+      </div>
+    </div>
+
+    <!-- external librairies CDN -->
+    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
+    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.js"></script>
+    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-sanitize.js"></script>
+    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.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>
+
+    <!-- IBAN external library -->
+    <script src="../../vendors/iban/iban.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.5.1",
+  "version": "1.5.2",
   "author": "Ghislain B.",
   "description": "Angular-Validation Directive and Service (ghiscoding)",
   "main": "app.js",

diff --git a/readme.md b/readme.md
@@ -1,5 +1,5 @@
 #Angular Validation (Directive / Service)
-`Version: 1.5.1`
+`Version: 1.5.2`
 ### Forms Validation with Angular made easy!
 ##### (Concept comes from the amazing Laravel)
 

diff --git a/src/validation-common.js b/src/validation-common.js
@@ -235,11 +235,20 @@ angular
 
         // loop through all validators of the element
         for (var i = 0, ln = validations.length; i < ln; i++) {
-          // params split will be:: [0]=rule, [1]=ruleExtraParams OR altText, [2] altText
-          var params = validations[i].split(':');
-
           // check if user provided an alternate text to his validator (validator:alt=Alternate Text)
-          var hasAltText = validations[i].indexOf("alt=") >= 0;
+          var posAltText = validations[i].indexOf("alt=");
+          var hasAltText = posAltText >= 0;
+          var params = [];
+
+          // alternate text might have the character ":" inside it, so we need to compensate
+          // since altText is always at the end, we can before the altText and add back this untouched altText to our params array
+          if(hasAltText) {
+            params = validations[i].substring(0,posAltText-1).split(':'); // split before altText, so we won't touch it
+            params.push(validations[i].substring(posAltText));                // add back the altText to our split params array
+          }else {
+            // params split will be:: [0]=rule, [1]=ruleExtraParams OR altText, [2] altText
+            params = validations[i].split(':');
+          }
 
           self.validators[i] = ValidationRules.getElementValidators({
             altText: hasAltText === true ? (params.length === 2 ? params[1] : params[2]) : '',