Vee-validate: ValidationProvider manual validation using ref not working

[zefexdeveloper]

Versions

• vee-validate: 3.1.3
• vue: 2.6.10

Describe the bug
I'm trying to validate manually when the user changes the input file but it doesn't work.
The reason I call an external method instead of calling the validate from the ValidationProvider scope is that I want to do a few more things if the validation is valid.
It does work when using like: <ValidationProvider name="image" rules="dimensions:500,500" v-slot="{ errors, validate }">
When using a custom method it always return true for validation

To reproduce

    <ValidationProvider
      ref="provider"
      name="image"
      rules="dimensions:500,500"
      v-slot="{ errors }"
    >
      <p><input type="file" accept="image/*" @change="selected" /></p>

      <span>{{ errors[0] }}</span>
    </ValidationProvider>

    async selected({ target: { files } }) {
      const valid = await this.$refs.provider.validate();

      if (!valid) {
        console.log("is not valid");
        return;
      }
    }

Expected behavior
It should validate and the error appear.

Demo link
https://codesandbox.io/s/vee-validate-manual-input-file-validation-th5vt

If you change to <input type="file" accept="image/*" @change="validate"> it works.

[zefexdeveloper]

I think it's a problem with the rules of input file like image, dimensions and so on. If I change it to text and put required the manual validation works.

[logaretm]

This is because the ValidationProvider requires having a v-model or a value attribute on your input so it can identify which node to validate, also to pick up the value.

You can pass your value to the `validate method which is documented in the API page:

https://logaretm.github.io/vee-validate/api/validation-provider.html#methods

So your code should become:

const valid = await this.$refs.provider.validate(files);

[zefexdeveloper]

Thank you @logaretm. Keep up the good work.

[zefexdeveloper]

@logaretm It doesn't seem to be working, the error always appears even selecting a valid image. https://codesandbox.io/s/vee-validate-manual-input-file-validation-th5vt

[logaretm]

My bad, The dimension rule and any file rule currently accept File[] array, the e.target.files is a FileList.

So instead you could do:

const { valid } = await this.$refs.provider.validate(Array.from(files));

Also the return value of validate function is a validation result object, so you should extract the valid prop out of it. I have updated your example:

https://codesandbox.io/s/vee-validate-manual-input-file-validation-oe5i3

[zefexdeveloper]

Thank you very much @logaretm, you saved my life. ♥