Vee-validate: Validating a non-existent field: "#1". Use "attach()" first.

[jsodeman]

Versions

• vee-validate: 2.2.8
• vue: 2.6.10

Describe the bug
Using v-if to show/hide inputs causes the error. There is a closed issue on this but from the comments it's still a problem for multiple people https://github.com/baianat/vee-validate/issues/1828

vee-validate.esm.js?7bb1:305 Uncaught (in promise) Error: [vee-validate] Validating a non-existent field: "#1". Use "attach()" first.
at createError (vee-validate.esm.js?7bb1:305)
at Validator._handleFieldNotFound (vee-validate.esm.js?7bb1:3653)
at Validator.validate (vee-validate.esm.js?7bb1:3232)
at ScopedValidator.validate (vee-validate.esm.js?7bb1:2705)
at VueComponent.fn (vee-validate.esm.js?7bb1:2355)

[jsodeman]

I figured out the cause of the error and was able to fix it.

In my case I had a change event on the input which then modified the value of the data that the input was bound to. Specifically if the input was hidden I was clearing the value of the input.

The problem seems to be that the validation's value change listener on the input was getting fired when I cleared the variable, which then tried to validate the input, but the input was no longer in the validator's field list because it was detached when it was hidden.

This might also be an issue if you have a watcher that changes the value of an input that's being hidden.

My fix was to simply wrap the code that cleared the variable in a $nextTick, though I could probably rewrite my code to clear the variable at a later stage.

[whosesmile]

Inspire by the author, this is my temporary approach:

  // through ajax get a CONFIG data
  // the variable "category" will determine which input fileds to render
  this.form.category = CONFIG.category;

  // now dynamic render has been finished, change input values will not fire dom error
  this.$nextTick(() => {
    this.form = CONFIG;
  });

[SevymolSebastian]

this.$validator.pause()
this.$nextTick(() => {
this.$validator.errors.clear()
this.$validator.fields.items.forEach(field => field.reset())
this.$validator.fields.items.forEach(field => this.errors.remove(field))
this.$validator.resume()
})
This code will solve the issue.