How to validate if radio button is selected? - vue.js

Question

I got these two radio buttons in my page:
<input type="radio" :id="DIGITAL_INVOICE_DIGITAL" name="digitalInvoice" :value="false" v-model="digitalInvoice"/>
<input type="radio" :id="DIGITAL_INVOICE_PAPER" name="digitalInvoice" :value="false" v-model="digitalInvoice"/>
They are not part of <base-radio-list> and I don't want them to be.
As part of making user choice effective, both of them are not selected in the first time, thus, there need to be a validation to check if the user chose or not.
I want to make this validation using vee-validate, how can I make it ?

Answer 1

Below you can find validation using ValidationProvider from vee-validate.
You can work on top of this codesandbox.
Let me know how it goes.
Test.Vue
<template>
<div class="columns is-multiline">
<div class="column is-6">
<p class="control">
<ValidationProvider
ref="provider"
rules="oneOf:1,2"
v-slot="{ errors }"
>
<label class="radio">
<input
name="digitalInvoice"
value="1"
type="radio"
v-model="digitalInvoice"
/>
Yes
</label>
<label class="radio">
<input
name="digitalInvoice"
value="2"
type="radio"
v-model="digitalInvoice"
/>
No
</label>
<br />
<p class="control">
<b>{{ errors[0] }}</b>
</p>
</ValidationProvider>
<br />
</p>
</div>
</div>
</template>
<script>
import { ValidationProvider, extend } from "vee-validate";
import { oneOf } from "vee-validate/dist/rules";
extend("oneOf", {
...oneOf,
message: "Choose one",
});
export default {
name: "radio-buttons-test",
components: {
ValidationProvider,
},
data() {
return {
digitalInvoice: false,
};
},
mounted() {
this.$refs.provider.validate();
},
};
</script>
App.vue
<template>
<div id="app">
<Test />
</div>
</template>
<script>
import Test from "./components/Test";
export default {
name: "App",
components: {
Test,
},
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

Answer 2

In Vue, the value of the input and the value of the data object are the same.
For the input radios that are more than one element with the same v-model, the name attribute is ignored and the value stored in the data will be equal to the value attribute of the currently selected radio input.
<input type="radio" :id="DIGITAL_INVOICE_DIGITAL" :value="value1" v-model="digitalInvoice"/>
<input type="radio" :id="DIGITAL_INVOICE_DIGITAL" :value="value2" v-model="digitalInvoice"/>
and your vue data is:
data: {
digitalInvoice: "value1"
}
for unchecked try:
data: {
digitalInvoice: ""
}