How to force a recheck of Vuelidate validation

user_1972453 0
Viewed 628

How can I force Vuelidate to re-check a validation?

My use case is that I have a form field where a user can enter the name of a remote directory and I have a Vuelidate validation which checks with the server if that directory exists

validations: {
  directory: {
    exists(value) {
      return checkExistsOnServer(value).then(result => result.directoryExists)
    }
  }
}

This works as expected when the directory field is updated. However, other actions in the app can affect whether this directory exists on the server, so I need a way to be able to manually force this check to re-run in response to various events on the page. How can I force this exists check to be re-run without changing the value of the directory field?

From the docs, I thought that calling this.$v.directory.$touch() would do it, but it doesn't seem to. I've also tried calling $reset() before $touch().

I've created this JSFiddle showing my current unsuccessful attempt.

vuelidate vue.js javascript
1 Answers

I've stumbled accross the same issue today. The only way I found to make it work was a bit hacky:

const directoryValue = this.$v.directory.$model;
this.$v.directory.$model = null;
this.$v.directory.$model = directoryValue;

This seems to force the reevaluation of the field validation. I'm guessing somewhere in the Vuelidate code there is something that checks that the value has changed before validating, and that's why all the $reset and $touch I've tried haven't work.

user_67922380
Related