Vee Validate 3.0 custom classes not applied

Question

From the docs, I think I need to use configure to add custom classes to my validated fields, but I can't get it to work.

This is what I have so far...

import { extend, configure, localize } from 'vee-validate'
import { required, min, max } from 'vee-validate/dist/rules'
import en from 'vee-validate/dist/locale/en.json'

// Install rules
extend('required', required)
extend('min', min)
extend('max', max)

// Install classes
configure({
  classes: {
    valid: 'is-valid',
    invalid: 'is-invalid'
  }
})

// Install messages
localize({
  en
})

And in my view....

<ValidationObserver ref="observer" v-slot="{ invalid }" tag="form" @submit.prevent="checkRef()">
  <div class="form-group">
    <label for="reference">Reference</label>
    <ValidationProvider rules="required|max:20" name="reference" v-slot="{ errors }">
      <input maxlength="20" name="reference" v-model="ref" id="reference" class="form-control"/>
      <span class="warning">{{ errors[0] }}</span>
    </ValidationProvider>
  </div>
  <button @click="checkRef" class="btn btn-primary app-button">Check Reference</button>
</ValidationObserver>

When I click the button, I see the error message but I don't get the 'in-invalid' class applied to my field.

What am I doing wrong?

logaretm logaretm · Accepted Answer · 2019-11-29T22:17:34

VeeValidate does not apply the classes automatically anymore, since v3 you now must bind it yourself. Like errors you can extract classes from the slot props and apply it to your input:

<ValidationProvider rules="required|max:20" name="reference" v-slot="{ errors, classes }">
  <input maxlength="20" name="reference" v-model="ref" id="reference" class="form-control" :class="classes" />
  <span class="warning">{{ errors[0] }}</span>
</ValidationProvider>

Vee Validate 3.0 custom classes not applied

1 Answers