I have a scenario where I have sectioned out (scoped) a form so that I can validate small chunks at a time using the following function.

validateScope (scope) {
  return this.$validator.validateAll(scope);
}

I want to do one final validation of the entire form before I submit it to the server; however, validateAll() doesn't seem to pick up inputs that have been added to a scope. I've also tried just validating each scope and then submit the form if they are ALL valid, but I am not sure how to do that since everything is asynchronous.

validateAll () {
   let valid = true;

   // Not sure how to build this function since validateScope is asynchronous
   _.each(this.names, (name, index) => {
     if (this.validateScope(`name-${index}`)) {
       valid = false;
     }
   });

   return valid; // Always returns true even though the _.each should set it to false
}

I have a scenario where I have sectioned out (scoped) a form so that I can validate small chunks at a time using the following function.

validateScope (scope) {
  return this.$validator.validateAll(scope);
}

I want to do one final validation of the entire form before I submit it to the server; however, validateAll() doesn't seem to pick up inputs that have been added to a scope. I've also tried just validating each scope and then submit the form if they are ALL valid, but I am not sure how to do that since everything is asynchronous.

validateAll () {
   let valid = true;

   // Not sure how to build this function since validateScope is asynchronous
   _.each(this.names, (name, index) => {
     if (this.validateScope(`name-${index}`)) {
       valid = false;
     }
   });

   return valid; // Always returns true even though the _.each should set it to false
}

• javascript
• vue.js
• promise
• vee-validate

• "pick up inputs that have been added to a scope." how are you adding inputs to a scope? – acdcjunior Commented Feb 28, 2018 at 15:18
• You're going to need to collect all the promises returned from validateScope using something like Promise.all and then evaluate whether one of them returned false or not. If you want to set up a working example, it would be easier to generate an answer. – Bert Commented Feb 28, 2018 at 15:19
• Where in the code is the asynchronous part? – Bergi Commented Feb 28, 2018 at 15:37
• @bergi $validator.validateAll is a VeeValidate library function that returns a promise. – Bert Commented Feb 28, 2018 at 15:46
• @Bert Ah, I thought it was the function posted in the second snippet… – Bergi Commented Feb 28, 2018 at 16:00

1 Answer 1

As mentioned in my ment, your code will end up looking something like this:

validateAll () {
   let valid = true;

   let validations = []
   _.each(this.names, (name, index) => {
     validations.push(this.validateScope('name-' + index))
   });

   return Promise.all(validations)
     // consolidate the results into one Boolean
     .then(results => results.every(r => r))
}

Then, of course, you'll have to use validateAll as a promise:

this.validateAll().then(isValid => {
  if (!isValid) {
    //do whatever you need to do when something failed validation
  } else {
    // do whatever you need to do when everything is valid here
  }
})