Fixed issue #28 - unbind all 'blur' affect modules

- Fixed issue #28 - unbind all 'blur' in cancelValidation() might affect
other modules

Author: ghiscoding

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "ghiscoding.angular-validation",
-  "version": "1.3.18",
+  "version": "1.3.19",
   "authors": [
     "Ghislain B."
   ],

changelog.txt

@@ -19,4 +19,5 @@ Angular-Validation change logs
 1.3.15 (2015-04-08) Fixed issue #23 If multiple forms exist in the app the errors in 1 form affect validation in the other
 1.3.16 (2015-04-09) Accept Merge #3 Fixed removeFromValidationSummary to also remove from 'local' array
 1.3.17 (2015-04-11) Added global `$scope.$validationOptions` object, for now only has the `debounce` property that be used by both the Directive and Service.
-1.3.18 (2015-04-19) Fixed issue #20 - Error messages shown on submit are non-understandable, this was fixed using $translate promises instead of $translate.instant(). Fixed a few error display on the validationSummary() and checkFormValidity(). Also merged #27 to add Russian
+1.3.18 (2015-04-19) Fixed issue #20 - Error messages shown on submit are non-understandable, this was fixed using $translate promises instead of $translate.instant(). Fixed a few error display on the validationSummary() and checkFormValidity(). Also merged #27 to add Russian
+1.3.19 (2015-04-20) Fixed issue #28 - unbind all 'blur' in cancelValidation() might affect other modules

dist/angular-validation.min.js

@@ -1,6 +1,6 @@
 {
   "name": "ghiscoding.angular-validation",
-  "version": "1.3.18",
+  "version": "1.3.19",
   "author": "Ghislain B.",
   "description": "Angular-Validation Directive and Service (ghiscoding)",
   "main": "app.js",

package.json

@@ -1,5 +1,5 @@
 #Angular Validation (Directive / Service)
-`Version: 1.3.18`
+`Version: 1.3.19`
 ### Form validation after user inactivity of default 1sec. (customizable timeout)
 
 Forms Validation with Angular made easy! Angular-Validation is an angular directive/service with locales (languages) with a very simple approach of defining your `validation=""` directly within your element to validate (input, textarea, etc) and...that's it!!! The directive/service will take care of the rest!
@@ -499,4 +499,5 @@ License
 * [1.3.15](https://github.com/ghiscoding/angular-validation/commit/24037e4b2e22658e7e2011c022ba4cca26f391d9) `2015-04-08` Fixed #23 If multiple forms exist in the app the errors in 1 form affect validation in the other
 * [1.3.16](https://github.com/ghiscoding/angular-validation/commit/6c419d45bdb00341416d91199003d827259bd5da) `2015-04-09` Accept Merge #3 Fixed removeFromValidationSummary to also remove from 'local' array
 * [1.3.17](https://github.com/ghiscoding/angular-validation/commit/1283a3a7435c70ec0a355ee273c8479e4b9bdabf) `2015-04-11` Added global `$scope.$validationOptions` [Global Options](#global-options) object, for now only has the `debounce` property that be used by both the Directive and Service.
-* [1.3.18](https://github.com/ghiscoding/angular-validation/commit/d4b55741b9635cd5654f44c58c146f4d86b2e512) `2015-04-19` Fixed issue #20 - Error messages shown on submit are non-understandable, this was fixed using $translate promises instead of $translate.instant(). Fixed a few error display on the validationSummary() and checkFormValidity(). Also merged #27 to add Russian
+* [1.3.18](https://github.com/ghiscoding/angular-validation/commit/d4b55741b9635cd5654f44c58c146f4d86b2e512) `2015-04-19` Fixed issue #20 - Error messages shown on submit are non-understandable, this was fixed using $translate promises instead of $translate.instant(). Fixed a few error display on the validationSummary() and checkFormValidity(). Also merged #27 to add Russian
+* [1.3.19]() `2015-04-20` Fixed issue #28 - unbind all 'blur' in cancelValidation() might affect other modules

readme.md

@@ -20,6 +20,8 @@
         // create an object of the common validation
         var commonObj = new validationCommon(scope, elm, attrs, ctrl);
         var timer;
+        var blurHandler;
+        var isValidationCancelled = false;
 
         // construct the functions, it's just to make the code cleaner and put the functions at bottom
         var construct = {
@@ -49,17 +51,18 @@
 
         /** Cancel current validation test and blank any leftover error message */
         function cancelValidation() {
+          isValidationCancelled = true;
           $timeout.cancel(timer);
           commonObj.updateErrorMsg('');
           ctrl.$setValidity('validation', true);
-          elm.unbind('blur'); // unbind onBlur event, if not it will fail when input become dirty & empty
+          elm.unbind('blur', blurHandler); // unbind onBlur event so that it does not fail on a non-required element that is now dirty & empty
         }
 
         /** Validator function to attach to the element, this will get call whenever the input field is updated
          *  and is also customizable through the (typing-limit) for which inactivity this.timer will trigger validation.
          * @param string value: value of the input field
          */
-        function attemptToValidate(value, event) {
+        function attemptToValidate(value) {
           // pre-validate without any events just to pre-fill our validationSummary with all field errors
           // passing false as 2nd argument for not showing any errors on screen
           commonObj.validate(value, false);
@@ -68,6 +71,8 @@
           if(!commonObj.isFieldRequired() && (value === "" || value === null || typeof value === "undefined")) {
             cancelValidation();
             return value;
+          }else {
+            isValidationCancelled = false;
           }
 
           // invalidate field before doing any validation
@@ -77,9 +82,13 @@
 
           // if field is not required and his value is empty, cancel validation and exit out
           // onBlur make validation without waiting
-          elm.bind('blur', function() {
-            // make the regular validation of the field value
-            scope.$evalAsync( ctrl.$setValidity('validation', commonObj.validate(value, true)) );
+          elm.bind('blur', blurHandler = function() {
+            if(isValidationCancelled) {
+              return value;
+            }else {
+              // make the regular validation of the field value
+              scope.$evalAsync( ctrl.$setValidity('validation', commonObj.validate(value, true)) );
+            }
             return value;
           });
 

src/validation-directive.js

@@ -16,6 +16,8 @@ angular
     var validationAttrs;  // Current Validator attributes
     var commonObj;        // Object of validationCommon service
     var timer;            // timer of user inactivity time
+    var blurHandler;
+    var isValidationCancelled = false;
 
     // service constructor
     var validationService = function() {
@@ -65,11 +67,15 @@ angular
       }
 
       // onBlur make validation without waiting
-      attrs.elm.bind('blur', function(event) {
-        // re-initialize to use current element & remove waiting time & validate
-        self.commonObj.initialize(attrs.scope, attrs.elm, attrs, attrs.ctrl);
-        self.commonObj.typingLimit = 0;
-        attemptToValidate(self, event.target.value);
+      attrs.elm.bind('blur', blurHandler = function(event) {
+        if(isValidationCancelled) {
+          return;
+        }else {
+          // re-initialize to use current element & remove waiting time & validate
+          self.commonObj.initialize(attrs.scope, attrs.elm, attrs, attrs.ctrl);
+          self.commonObj.typingLimit = 0;
+          attemptToValidate(self, event.target.value);
+        }
       });
 
       // merge both attributes but 2nd object (attrs) as higher priority, so that for example debounce property inside `attrs` as higher priority over `validatorAttrs`
@@ -206,6 +212,8 @@ angular
       if(!self.commonObj.isFieldRequired() && (value === "" || value === null || typeof value === "undefined")) {
         cancelValidation(self);
         return value;
+      }else {
+        isValidationCancelled = false;
       }
 
       // invalidate field before doing any validation
@@ -246,10 +254,11 @@ angular
      * @param object obj
      */
     function cancelValidation(obj) {
+      isValidationCancelled = true;
       $timeout.cancel(self.timer);
       obj.commonObj.updateErrorMsg('');
       obj.commonObj.ctrl.$setValidity('validation', true);
-      obj.commonObj.elm.unbind('blur'); // unbind onBlur event, if not it will fail when input become dirty & empty
+      obj.commonObj.elm.unbind('blur', blurHandler); // unbind onBlur event so that it does not fail on a non-required element that is now dirty & empty
     }
 
     /**
@@ -280,7 +289,7 @@ angular
       unbindWatcher();
 
       // also unbind the blur directly applied on element
-      formElmObj.elm.unbind();
+      //formElmObj.elm.unbind();
 
       // now to remove any errors, we need to make the element untouched, pristine and remove the validation
       // also remove it from the validationSummary list and remove any displayed error