[Vuejs]-How to validate all refs with vee-validate?

by

0👍

this is the solution:

    validateForm() {
      const PROMISES = [this.$refs.contactDetailsForm.$refs.contactDetails]
      for (let i = 1; i <= this.count; i++) {
        PROMISES.push(this.$refs[`passengerForm${i}`][0])
      }

      return new Promise((resolve, reject) => {
        PROMISES.forEach(async (item) => {
          const STATUS = await item.validate()
          STATUS ? resolve(STATUS) : reject(STATUS)
        })
      })
    }

0👍

Untested, but Promise.all returns an array of results for the promises. What you need to do is trigger validate for all the things you want to know the result for, collect those promises and then check the results in a Promise.all. You didn’t give quite enough code to answer this fully but it’s something like this:

validateForm() {
  //both of these I added validate() to because I'm hoping they are references to ValidationObservers
  const PROMISES = [this.$refs.contactDetailsForm.$refs.contactDetails.validate()]
  for (let i = 1; i <= this.count; i++) {
    PROMISES.push(this.$refs[`passengerForm${i}`][0].validate())
  }

  return Promise.all(Promises);
}

Then wherever you are calling this, you’d do:

this.validateForm().then((values) => {
    this.formIsValid = values.every((result) => result));
    //if the things above are ValidationProviders rather than VO, you have to use result.valid instead of result
});

Leave a comment