Validations Lifecycle

Hello 😃

Basically, I have a form control that has synchronous validators and asynchronous.

  validations: {
    form: {
      username: {
        required, // sync validator
        min: minLength(6), // sync validator
        uniqueUsername, // async validator
      },
    },
  },

The problem is that even if the synchronous ones already triggered an error the asynchronous ones still executes.

The expected behavior, considering performance issues due to unnecessary API calls, would be to execute the asynchronous validators only if the form has no errors coming from the synchronous validators.

I think that’s the Angular’s forms module behavior.

Is there a way to work around this problem? Is this a nice feature to add to the library?

[lgmf-daitan]

I’ve updated my code based on the suggestion

const validationService = {
  async validate(field, value) {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          valid: typeof value === "string" && value.length % 2 !== 0
        });
      }, 350 + Math.random() * 300);
    });
  }
};

const hasSyncError = (form, field, syncValidators = []) => {
  return syncValidators.some((syncValidator) => !form[field][syncValidator]);
};

export default function createAsyncValidatorFor(field, { syncValidators }) {
  return async function asyncValidator(value) {
    if (!value || hasSyncError(this.$v.form, field, syncValidators)) {
      return true;
    }

    const { valid } = await validationService.validate(field, value);
    return valid;
  };
}

validations: {
    form: {
      username: {
        required,
        min: minLength(6),
        uniqueUsername: createAsyncValidatorFor("username", {
          syncValidators: ["required", "min"]
        })
      }
    }
  }

And know its working like a charm (https://codesandbox.io/s/gallant-mendel-qdoli?file=/src/components/Form.vue:780-1006)

[rubens-lopes]

Based upon @shentao answer I come up with this, that worked for my case.

  validations: {
    form: {
      username: {
        required, // sync validator
        min: minLength(6), // sync validator
        uniqueUsername: async () => {
            if (!this.syncValidations) return true;

            return await uniqueUsername();
        }
      },
    },
  },
  computed: {
    syncValidations() {
        return this.$v.form.username.required && this.$v.form.username.min;
      }
  }

To avoid infinite loop we have to check each sync validation below username to avoid recursion.