CODEWITHSUNDEEP
vue.jsuser-interfacevee-validate
roeygol
roeygol

Reputation: 5028

How to validate if radio button is selected?

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 ?

Upvotes: 0

Views: 2714

Answers (2)

Indrit Kello
Indrit Kello

Reputation: 1313

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>

Upvotes: 1

Karleen-Bx
Karleen-Bx

Reputation: 47

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: ""
}

Upvotes: 0

Related Questions