7

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
}
Matthias Hryniszak
  • 3,099
  • 3
  • 36
  • 51
Neve12ende12
  • 1,154
  • 4
  • 17
  • 33
  • *"pick up inputs that have been added to a scope."* how are you adding inputs to a scope? – acdcjunior Feb 28 '18 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 Feb 28 '18 at 15:19
  • Where in the code is the asynchronous part? – Bergi Feb 28 '18 at 15:37
  • @bergi `$validator.validateAll` is a [VeeValidate](http://vee-validate.logaretm.com/api.html) library function that returns a promise. – Bert Feb 28 '18 at 15:46
  • @Bert Ah, I thought it was the function posted in the second snippet… – Bergi Feb 28 '18 at 16:00

1 Answers1

5

As mentioned in my comment, 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
  }
})
Bert
  • 80,741
  • 17
  • 199
  • 164