Unified way of dealing with async validations

Author: victorjonsson

src/main/async.js

@@ -0,0 +1,116 @@
+/**
+ */
+(function ($, undefined) {
+
+  var disableFormSubmit = function () {
+      return false;
+    },
+    HaltManager = {
+      numHalted: 0,
+      haltValidation: function($form) {
+        this.numHalted++;
+        $.formUtils.haltValidation = true;
+        $form
+          .unbind('submit', disableFormSubmit)
+          .bind('submit', disableFormSubmit)
+          .find('*[type="submit"]')
+            .addClass('disabled')
+            .attr('disabled', 'disabled');
+      },
+      unHaltValidation: function($form) {
+        this.numHalted--;
+        if (this.numHalted === 0) {
+          $.formUtils.haltValidation = false;
+          $form
+            .unbind('submit', disableFormSubmit)
+            .find('*[type="submit"]')
+              .removeClass('disabled')
+              .removeAttr('disabled', 'disabled');
+        }
+      }
+    };
+
+  function AsyncValidation($form, $input) {
+    this.$form = $form;
+    this.$input = $input;
+    this.reset();
+  }
+
+  AsyncValidation.prototype.reset = function() {
+    this.haltedFormValidation = false;
+    this.hasRun = false;
+    this.isRunning = false;
+    this.result = undefined;
+  };
+
+  AsyncValidation.prototype.run = function(eventContext, callback) {
+    if (eventContext === 'keyup') {
+      return null;
+    } else if (this.isRunning) {
+      if (!this.haltedFormValidation && eventContext === 'submit') {
+        HaltManager.haltValidation();
+        this.haltedFormValidation = true;
+      }
+      return null; // Waiting for result
+    } else if(this.hasRun) {
+      this.$input.one('keyup paste', this.reset.bind(this));
+      return this.result;
+    } else {
+      console.log(eventContext);
+      if (eventContext === 'submit') {
+        HaltManager.haltValidation(this.$form);
+        this.haltedFormValidation = true;
+      }
+      this.isRunning = true;
+      this.$input
+        .attr('disabled', 'disabled')
+        .addClass('async-validation');
+      this.$form.addClass('async-validation');
+
+      callback(function(result) {
+        this.done(result);
+      }.bind(this));
+
+      return null;
+    }
+  };
+
+  AsyncValidation.prototype.done = function(result) {
+    this.result = result;
+    this.hasRun = true;
+    this.isRunning = false;
+    this.$input
+      .removeAttr('disabled')
+      .removeClass('async-validation');
+    this.$form.removeClass('async-validation');
+    if (this.haltedFormValidation) {
+      HaltManager.unHaltValidation(this.$form);
+      this.$form.trigger('submit');
+    } else {
+      this.$input.trigger('validation.revalidate');
+    }
+  };
+
+  $.formUtils = $.extend($.formUtils || {}, {
+    asyncValidation: function(validatorName, $input, $form) {
+      // Return async validator attached to this input element
+      // or create a new async validator and attach it to the input
+      var asyncValidation,
+        input = $input.get(0);
+
+      if (!input.asyncValidators) {
+        input.asyncValidators = {};
+      }
+
+      if (input.asyncValidators[validatorName]) {
+        asyncValidation = input.asyncValidators[validatorName];
+      } else {
+        asyncValidation = new AsyncValidation($form, $input);
+        input.asyncValidators[validatorName] = asyncValidation;
+      }
+
+      return asyncValidation;
+    }
+  });
+
+})(jQuery);

src/main/jquery-plugins.js

@@ -172,20 +172,20 @@
    * @param {Object} [language] Optional, will override $.formUtils.LANG
    * @param {Object} [conf] Optional, will override the default settings
    * @param {Boolean} attachKeyupEvent Optional
-   * @param {String} eventType
+   * @param {String} eventContext
    * @return {jQuery}
    */
-  $.fn.validateInputOnBlur = function (language, conf, attachKeyupEvent, eventType) {
+  $.fn.validateInputOnBlur = function (language, conf, attachKeyupEvent, eventContext) {
 
-    $.formUtils.eventType = eventType;
+    $.formUtils.eventType = eventContext;
 
     if ( this.willPostponeValidation() ) {
       // This validation has to be postponed
       var _self = this,
         postponeTime = this.valAttr('postpone') || 200;
 
       window.postponedValidation = function () {
-        _self.validateInputOnBlur(language, conf, attachKeyupEvent, eventType);
+        _self.validateInputOnBlur(language, conf, attachKeyupEvent, eventContext);
         window.postponedValidation = false;
       };
 
@@ -208,9 +208,19 @@
         language,
         conf,
         $form,
-        eventType
+        eventContext
       );
 
+    var reValidate = function() {
+      $elem.validateInputOnBlur(language, conf, false, 'blur.revalidated');
+    };
+
+    if (eventContext === 'blur') {
+      $elem
+        .unbind('validation.revalidate', reValidate)
+        .one('validation.revalidate', reValidate);
+    }
+
     if (attachKeyupEvent) {
       $elem.removeKeyUpValidation();
     }
@@ -381,6 +391,8 @@
           'submit'
         );
 
+        console.log(result);
+
         if (!result.isValid) {
           addErrorMessage(result.errorMsg, $elem);
         } else if (result.isValid && result.shouldChangeDisplay) {
@@ -408,10 +420,8 @@
     $.formUtils.isValidatingEntireForm = false;
 
     // Validation failed
-    if (!$.formUtils.haltValidation && errorInputs.length > 0) {
-
+    if (errorInputs.length > 0) {
       if (displayError) {
-
         if (conf.errorMessagePosition === 'top') {
           $.formUtils.dialogs.setMessageInTopOfForm($form, errorMessages, conf, language);
         } else {
@@ -422,17 +432,14 @@
         if (conf.scrollToTopOnError) {
           $.formUtils.$win.scrollTop($form.offset().top - 20);
         }
-
       }
-
-      return false;
     }
 
     if (!displayError && $.formUtils.haltValidation) {
       $.formUtils.errorDisplayPreventedWhenHalted = true;
     }
 
-    return !$.formUtils.haltValidation;
+    return errorInputs.length == 0 && !$.formUtils.haltValidation;
   };
 
   /**

src/main/setup.js

@@ -123,7 +123,7 @@
         }
 
         var valid = $form.isValid(conf.language, conf);
-
+        console.log(valid);
         if ($.formUtils.haltValidation) {
           // Validation got halted by one of the validators
           return stop();

src/main/utils.js

@@ -192,7 +192,7 @@
 
           if (eventContext !== 'keyup' || validator.validateOnKeyUp) {
             // A validator can prevent itself from getting triggered on keyup
-            isValid = validator.validatorFunction(value, $elem, conf, language, $form);
+            isValid = validator.validatorFunction(value, $elem, conf, language, $form, eventContext);
           }
 
           if (!isValid) {