Asynchronous Validators are broken

[arnKo]

I found two major breaks in the asynchronous validation. I reproduced both in this jsfiddle

First, if I type multiple characters into a text field, for each typed character a new validation error is displayed. Even if using formOptions.validateDebounceTime, which is currently not documented, multiple validation errors are displayed if I type a new character after the debounce timer and before the asynchronous validation is completed.

Second, asynchronous validation errors are not included when using a submit button with the following schema:

{
    type: 'submit',
    validateBeforeSubmit: true,
}

I can still submit the form even if asynchronous validation errors are currently displayed.

[zoul0813]

I think I have a solution for this, using Promise.all() which will basically make all validations "promises" ... some will just resolve immediately, while others will wait for the promise to resolve.

in FormGenerator.vue, I'm modifying the validate() method to look something like this:

validate() {
  this.clearValidationErrors();

  let fields = [];
  let results = [];

  forEach(this.$children, (child) => {
    if (isFunction(child.validate)) {
      fields.push(child); // keep track of validated children
      results.push(child.validate(true));
    }
  });

  return Promise.all(results).then((errors) => {
    let formErrors = [];
    forEach(errors, (err, i) => {
      if(isArray(err) && err.length > 0) {
        formErrors.push({
          field: fields[i],
          error: err
        });
      }
    })
    this.errors = formErrors;
    let isValid = formErrors.length == 0;
    this.$emit("validated", isValid, formErrors);
    return formErrors;
  });
}

Should have a PR for this by the end of the day.

[zoul0813]

@arnKo that PR solves this issue, but to maintain backwards compatibility you’ll have to add “validayeAsyc: true” to your formOptions being passed to VFG. That will tell VFG to wait on async validators before calling the onSubmit callback, and the VFG validate method will return a Promise instead of a Boolean.