CODEWITHSUNDEEP
vue.jsvue-component
f1uk3r
f1uk3r

Reputation: 317

Validating a non-existent field error in console

My problem is I am getting this error when I try to validate my fields with VeeValidate on my system.

Uncaught (in promise) Error: [vee-validate] Validating a non-existent field: "". Use "attach()" first.
    at createError (vee-validate.esm.js?00d1:297)
    at Validator._handleFieldNotFound (vee-validate.esm.js?00d1:2282)
    at Validator.validate (vee-validate.esm.js?00d1:1959)
    at ScopedValidator.validate (vee-validate.esm.js?00d1:3276)
    at VueComponent.next (QueryAcademicForm.vue?f0b2:332)
    at click (eval at ./node_modules/vue-loader/lib/template-compiler/index.js?{"id":"data-v-e5b3dc5a","hasScoped":false,"transformToRequire":{"video":["src","poster"],"source":"src","img":"src","image":"xlink:href"},"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/QueryAcademicForm.vue (0.3f605440c8faec0820bd.hot-update.js:22), <anonymous>:364:25)
    at invoker (vue.esm.js?efeb:2027)
    at HTMLButtonElement.fn._withTask.fn._withTask (vue.esm.js?efeb:1826)

I tried to replicate it here on jsfiddle, it gives me same error but there is little bit difference in error message

Uncaught (in promise) Error: [vee-validate] Validating a non-existent field: "result". Use "attach()" first.
    at Re (vee-validate.min.js:1)
    at vn._handleFieldNotFound (vee-validate.min.js:1)
    at vn.validate (vee-validate.min.js:1)
    at ln.validate (vee-validate.min.js:1)
    at a.validateBeforeSubmit ((index):355)
    at click (eval at $a (vue.min.js:6), <anonymous>:2:4043)
    at t (vue.min.js:6)
    at HTMLButtonElement.Ir.t._withTask.i._withTask (vue.min.js:6)

One thing to notice that error is not on every instance of form-input component rather only on the last step.

Upvotes: 3

Views: 5181

Answers (2)

Muhammad Waqas Dilawar
Muhammad Waqas Dilawar

Reputation: 2322

In my case it did appear because my HTML dynamically renders based on the certain condition and I was using this piece of code <div v-if="condition"... > for dynamic rendering. Despite the fact I was using unique key.

To solve the issue, I've changed the v-if to v-show like this <div v-show="condition"... > and error's gone.

Reference

Upvotes: 3

s.feradov
s.feradov

Reputation: 86

The issue appears due to "in-place patch" strategy that Vue.js uses. This case is described in the VeeValidate documentation. Basically, you need to tell Vue.js to track all child components separately by setting unique value to the key attribute for each input element:

<form-input key="unique"></form-input>

Here is a working JSFiddle example.

Upvotes: 3

Related Questions