ayanova/src/api/gzform.js

@@ -139,16 +139,19 @@ export default {
   //
   required(vm, ref) {
     if (vm.formState.loading) {
+      // console.log("gzform:required rule - bailing due to loading", ref);
       return true;
     }
 
     let ctrl = getControl(vm, ref);
     if (typeof ctrl == "undefined") {
+      // console.log("gzform:required rule - bailing due to undefined", ref);
       return true;
     }
 
     let value = getControlValue(ctrl);
     if (!isEmpty(value)) {
+      //  console.log("gzform:required rule - PASSED!", ref);
       return true;
     }
 
@@ -158,6 +161,7 @@ export default {
     err = window.$gz._.replace(err, "{0}", fieldName);
     //lodash replace only replaces first instance so need to do it twice
     err = window.$gz._.replace(err, "{0}", fieldName);
+    // console.log("gzform:required rule - failed, setting invalid", fieldName);
     //Update the form status
     this.setFormState({
       vm: vm,
@@ -628,46 +632,61 @@ export default {
   //  This is required so that server errors can be cleared when input is changed
   //
   fieldValueChanged(vm, ref) {
-    if (triggeringChange || vm.formState.loading) {
-      return;
-    }
-    //If ref appears in the formState.serverErrors details collection, remove each one
-    let m = window.$gz._.remove(vm.formState.serverError.details, function(o) {
-      if (!o.target) {
-        return false;
+    let that = this;
+    //this is currently required to ensure that this method runs after all the broken rule checks have settled
+    Vue.nextTick(function() {
+      //-------------
+      if (triggeringChange || vm.formState.loading) {
+        return;
       }
-      return o.target.toLowerCase() == ref;
-    });
+      //If ref appears in the formState.serverErrors details collection, remove each one
+      let m = window.$gz._.remove(vm.formState.serverError.details, function(
+        o
+      ) {
+        if (!o.target) {
+          return false;
+        }
+        return o.target.toLowerCase() == ref;
+      });
 
-    //If there are no more errors in details then remove the whole thing as it's no longer required
-    if (
-      vm.formState.serverError.details &&
-      vm.formState.serverError.details.length < 1
-    ) {
-      if (vm.formState.serverError.code == "2200") {
-        //clear all keys from server error
-        window.$gz.util.removeAllPropertiesFromObject(vm.formState.serverError);
+      //If there are no more errors in details then remove the whole thing as it's no longer required
+      if (
+        vm.formState.serverError.details &&
+        vm.formState.serverError.details.length < 1
+      ) {
+        if (vm.formState.serverError.code == "2200") {
+          //clear all keys from server error
+          window.$gz.util.removeAllPropertiesFromObject(
+            vm.formState.serverError
+          );
+        }
       }
-    }
 
-    //Clear out old validation display in form by forcing the control's data to change
-    //I tried calling form validate and reset and all that bullshit but it did nothing
-    //probably because it has safeguards to prevent excess validation, this works though so far
-    //I added the triggering change guard but it actually doesn't seem to be required here, more investigation is required
-    if (m.length > 0) {
-      triggeringChange = true;
-      let val = vm.obj[ref];
-      vm.obj[ref] = null;
-      vm.obj[ref] = val;
-      triggeringChange = false;
-    }
+      //Clear out old validation display in form by forcing the control's data to change
+      //I tried calling form validate and reset and all that bullshit but it did nothing
+      //probably because it has safeguards to prevent excess validation, this works though so far
+      //I added the triggering change guard but it actually doesn't seem to be required here, more investigation is required
+      if (m.length > 0) {
+        triggeringChange = true;
+        let val = vm.obj[ref];
+        vm.obj[ref] = null;
+        vm.obj[ref] = val;
+        triggeringChange = false;
+      }
 
-    //Update the form status
-    this.setFormState({
-      vm: vm,
-      dirty: true,
-      valid: vm.$refs.form.validate()
-    });
+      //Update the form status
+      let formValid = vm.$refs.form.validate();
+      // console.log(
+      //   "gzform:fieldValueChanged - form validity being set to ",
+      //   formValid
+      // );
+      that.setFormState({
+        vm: vm,
+        dirty: true,
+        valid: formValid
+      });
+      //---------------
+    }); //next tick end
   },
   ////////////////////////////////////
   //  set calling form Valid state
@@ -678,6 +697,11 @@ export default {
   //
   setFormState(newState) {
     //this returns a promise so any function that needs to wait for this can utilize that
+    // if (newState.valid != null && newState.valid == false) {
+    //   console.trace();
+    //   console.log(newState);
+    //   // debugger;
+    // }
     return Vue.nextTick(function() {
       if (newState.valid != null) {
         newState.vm.formState.valid = newState.valid;