Is it possible to find out what exact field/child/node/DOM element the VeeValidate v3
ValidationProvider watches/listens to?
Currently, I am sorry, but updating to wonderful VeeValidate v4 is not possible in this project.
The main reason is to locate what field corresponds to what Vue VNode or DOM Node/Element after executing ValidationObserver's validateWithInfo which returns a Promise resolving to an object with ObserverField object(s) which, in turn, contains primitive values only but is keyed matching field name each.
One of the reasons the names (i.e. <abc name="Amazing Name Field" />
) are stated is validation messages interpolation function.
For example, it would allow to focus on that invalid non-native or native field without name
nor id
prop or attribute assigned in more appropriate manner without re-iterating through the whole DOM again searching for a needle.
Considering the source code, it seems VeeValidate does not store actual references to non-native (i.e. Vue Component with <input>
inside) nor native Vue node (e.g. <input>
) found with v-model
but sets Vue Component (i.e. $listeners) or Vue native (i.e. node.data.on) listeners to handle on input
, blur
, and change
events.
export function addVNodeListener(vnode: VNode, eventName: string, handler: Function): void {
if (vnode.componentOptions) {
addComponentNodeListener(vnode, eventName, handler);
return;
}
addNativeNodeListener(vnode, eventName, handler);
}
Currently, it's being searched manually via iterating over provider.$children
and searching for id
or name
matching the field, or querying over provider.$el
for any DOM with these same id
or name
. Yet, the library allows to validate fields with neither assigned and containing multiple fields inside even if it listens to a single since v3.3.0: extractId, findInputNodes.