CODEWITHSUNDEEP
javascriptvue.jsvuetify.jsvee-validate
user2824374
user2824374

Reputation: 220

How to validate v-select using vee-validate?

I'm trying to validate a select field in Vue. Currently using Vuetify2 and Vee-validate 3. It works for text field but v-select is not getting validated.

 <ValidationProvider name="Sources" rules="sourcesValidator" v-slot="{ errors }">
                    <v-select
                      v-model="sources"
                      :items="sourcesList"
                      dense
                      outlined
                      label="Select Source"
                      :error-messages="errors"
                    ></v-select>
</ValidationProvider>

import { ValidationObserver, ValidationProvider, extend } from 'vee-validate';

async created() {
    this.customValidator()
}

private customValidator() {
extend('sourcesValidator', {
      message: 'Source should be something else',
      validate: () => {
        console.log('here:', this.previousSource);
        return this.previousSource === 'CORP';
      }
    });
}

I'm calling a customValidator to validate my sources where I'm checking whether the previous selected data (which is another v-select) is CORP and return true or false. In short, if the previous selected value is CORP, then the sources cannot be empty. It must have a value. I added a console log, but it's not getting inside the validate function. I'm not sure what's going on. Any help would be greatly appreciated.

Upvotes: 0

Views: 27

Answers (0)

Related Questions