Is v-validate-class only allowed on ancestor node of validated DOM element?

[nandin-borjigin]

Bug report (maybe intended feature)

vue & vue-validator version

1.0.24, 2.1.3

Reproduction Link

Codepen

Steps to reproduce

None

What is Expected?

div#expected should be set with class="invalid\valid touched etc."

What is actually happening?

div#expected is not set to any validation class, if I put v-validate-class directive on div#working node it works, but that isn't what I want.

It seems that v-validate-class only works on ancestor node of the validated DOM element, is this a intended feature or a bug? If it's a bug, what's the simplest workaround before a hot-fix come?

Thanks for reading!

[kazupon]

This is intended feature. The v-validate-class only allowed on ancestor node of validated DOM element.

[nandin-borjigin]

@kazupon Then is there a work around ?

[nandin-borjigin]

I come up with a work around: Assume that the DOM tree looks like this

---- div.wrapper ------ input.validated
                  |---- div.expected

then I can put the v-validate-class directive on div.wrapper, which is an ancestor node of validated input field, and write the stylesheet as:

.invalid.touched .expected {
    border: 1px red solid;
    /* whatever you want */
}