Vee-validate: After upgrading Bootstrap-vue to 1.5.0 VeeValidate stopped to add automatic validation classes

[yoldar]

I used before [email protected] with [email protected]. VeeValidate applies automatic classes on inputs or components root elements being validated. Everything worked fine. But after upgrading Bootstrap-vue to 1.5.0 validation and automatic classes stoped to work on Bootstrap-vue b-input. But it works fine with simple usual input. Here is an example of two fields https://jsfiddle.net/2krjuhcq/ where you can test such situation. There can problem be?

[logaretm]

The automatic class binding has been removed temporary for custom components, because it is not a good practice to modify the component root element, at least for me.

Instead I will try to provide a way for custom components to bind into those classes.

404 #1154

[azavisha]

@logarethm Providing a way for components to bind to these classes would be great.

Although, if someone wants to use a third-party component that doesn't use these bindings, this solution won't help.

Perhaps allowing the parent component to specify a css (or some other) selector for the target element inside the child component could work. If there is no selector, then don't add any classes automatically by default (which is the current behaviour for components).

For example, if I want to use a third-party component that I know for sure has an <input> element, to which I want to apply some custom styles, I will use "input" as the selector and vee-validate will magically add the valid, invalid, etc. classes to that element.

If you think this is a narrow use case, feel free to ignore my suggestion.

[azavisha]

I ended up turning the classes option back off and using the following alternative in my project.

If you want to have the validation state classes (pristine, dirty, valid, invalid) automatically applied to some element, you can simply add a class attribute to that element like this :class="fields[name]", where name is the name of any validated field in the current scope.

Perhaps this will help someone. I'm not sure if this is a good practice, but I haven't encountered any issues so far. This approach seems simple, short, and flexible enough.

[syffs]

@azavisha could you please add a fiddle? fields only ever has null attribute defined

[azavisha]

@syffs https://jsfiddle.net/azavisha/ed4721pe/

[syffs]

@azavisha @logaretm it's what I though, it doesn't work.
fields bag only has a null item, and while errors bag does update, field is always set to null
Any tips?

[azavisha]

@syffs It does work. I even gave you a working fiddle... You must set the name attribute on both of your input elements. You should read the vee-validate docs.

[logaretm]

@azavisha that is a nice solution Alex, to me I prefer that the developer opts in rather than forced to bind the classes on the root element for custom components.

For example, it may work fine for bootstrap based UI, but other UIs libraries have different structures so applying the classes on the root element isn't always desired but it was forced in its implementation in vee-validate. I will use your code in the official doc.

[bbugh]

The workaround is good, but the problem is that it's not using the custom css classes defined by the config. We have a bunch of existing classes for error handling, and it doesn't make sense for us to define invalid and valid instead of the ones we're using. Is there some way to retrieve the custom class names? We could at least do something like :class="someVeeLookup(fields.name)"