Vee validate how to validate radio buttons

Question

From the VeeValidate available rules you can validate select with oneOf VeeValidate Rules

<ValidationProvider rules="oneOf:1,2,3" name="number" v-slot="{ errors }">
  <select v-model="value">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four (invalid)</option>
  </select>
  <span>{{ errors[0] }}</span>
</ValidationProvider>

But I don't how to do it with radio boxes

<ValidationProvider rules="oneOf:1,2,3" name="choice" v-slot="{ errors }">
    <label>
      <input type="radio" value="1" v-model="choice">
      One
    </label>
    <label>
      <input type="radio" value="2" v-model="choice">
      One
    </label>
    <label>
      <input type="radio" value="3" v-model="choice">
      One
    </label>
                
   <span>{{ errors[0] }}</span>
   </ValidationProvider>

I'm using nuxt

import { extend } from 'vee-validate';
import { oneOf } from 'vee-validate/dist/rules';

// Add the required rule
extend('oneOf ', {
  ...oneOf ,
  message: 'Choose one'
});

data and component

data () {
      return {
        choice: ''
  }
}

components: {
    ValidationObserver: ValidationObserver,
    ValidationProvider: ValidationProvider
  },

VeeValidate works on all other inputs

Dora Hong · Answer 1 · 2020-08-12T01:34:42.993

4

Edited

The way I do it is to wrap the ValidationProvider around the last radio input. Like this:

<label>
  <input type="radio" value="1" v-model="choice">
    One
</label>
<label>
  <input type="radio" value="2" v-model="choice">
    Two
</label>
<ValidationProvider rules="oneOf:1,2,3" name="choice" v-slot="{ errors }">
  <label>
    <input type="radio" value="3" v-model="choice">
      Three
   </label>
  <span>{{ errors[0] }}</span>
</ValidationProvider>

Previously I wrapped the validationProvider around every radio input, but I found if multiple validationProviders are using the same name, only the last one actually gets validated.

edited Aug 12 '20 at 01:34

answered Aug 11 '20 at 23:57

Dora Hong

41
2

1

Any suggestions for radios in a "v-for" list? – Kevin S Jun 29 '22 at 16:17
Same question @KevinS did you manage to make it work? – Justice47 Oct 19 '22 at 11:42
@Justice47 I posted another answer that worked for us using V-for. Hope that helps. – Kevin S Nov 11 '22 at 23:51

score 0 · Answer 2 · answered Nov 11 '22 at 23:49

Here's a solution that worked for us using a dynamic list of radio buttons using v-for.

<b-form-group label=" BUSINESS TYPE" class="form--label">
  <b-form-radio-group id="primary" v-model="businessType" name="primary-radio-options" stacked>
    <validation-provider v-slot="validationContext" name="Primary Business Type" rules="required">
      <b-form-radio 
      v-for="option in businessTypeList" 
      :key="option.text" 
      v-model="businessType" 
      :state="getValidationState(validationContext)" 
      :value="option.value">
        {{ option.text }}
      </b-form-radio>
       <span class="form--validationError">
        {{ validationContext.errors[0] }}
      </span>
    </validation-provider>
  </b-form-radio-group>
</b-form-group>


data() {
return  {
businessTypeList: [
            {text: 'Corporation - Public', value: 'publicCorporation'},
            {text: 'Corporation - Private', value: 'privateCorporation'},
            {text: 'LLC', value: 'llc'},
            {text: 'Partnership', value: 'partnership'}
          ]
        }
},
computed: {
    primaryBusinessType: {
      get () {
        return this.$store.getters['business/businessTypeInfo']?.primaryBusinessType
      },
      set (value) {
        this.$store.commit('application/SET_BUSINESS_TYPE_INFO', { primaryBusinessType: value })
      }
    }
}

Vee validate how to validate radio buttons

2 Answers2