vee-validate button validation

Question

I am fairly new with vee-validate. I would like to know how you can validate if a button has been pressed or not. I have wrapped my form with ValidationObserver with a v-slot of invalid. I want user to be required to select a button which would allow user to continue to the next page.

Code for validation Observer that i am wrapping my form:

<ValidationObserver v-slot="{ invalid }">
 ...some code
</ValidationObserver>

Code below is where i need to know how to set validation which is required for user to select a button from the list.

<v-col cols="6" v-for="(opt, index) in options" :key="index">
      <v-btn @click="selectedOption(index)">
        {{ opt.name }}
      </v-btn>
</v-col>

and end of my form i have button which allows user to continue. The button is disabled until the form has been completed and there are no validation errors. But i also want to ensure it will enable the button if customer selected the button from the list (code above) otherwise it should be disabled

<v-btn :disabled="invalid">
Continue
</v-btn>

logaretm logaretm · Accepted Answer · 2021-02-01T13:20:33

Your button needs to support and have v-model directive applied to it, the validation-provider from vee-validate tries to find the nodes/tags with v-model and watches them for changes/updates.

So you need to create a wrapping component around v-btn that implements v-model support.

Eventually it should look like this:

<v-col cols="6" v-for="(opt, index) in options" :key="index">
  <ValidationProvider :name="`btn_${index}`" >
    <CustomButtonInput v-model="selectedOption">
      {{ opt.name }}
    </CustomButtonInput>
  </ValidationProvider>
</v-col>

In a way it would be similar to either creating a radio or checkbox input components depending if you allow multiple selections or not.

vee-validate button validation

1 Answers