Vuelidate check box validation

Question

I am using Vue.js and I am new on it. I am currently working on validation. I had used vuelidate as my validation library. I had successfully done form validation, but trouble came when I had to check validation for check box.

How can I check validation for check box? Also, I had used bootstrapvue to display check box.

   <b-col lg="6" md="6" sm="6">
      <label>Bus Route</label>
      <b-form-group>
        <b-form-checkbox v-for="route in busRouteList"
                         v-model.trim="selectedRoute"
                         v-bind:value="route.value"
                         v-bind:unchecked-value="$v.selectedRoute.$touch()">
          {{route.text}}</b-form-checkbox>
      </b-form-group>
      <div class="form-group__message" v-if="$v.selectedRoute.error && !$v.selectedRoute.required">
        Field is required
      </div>
    </b-col>

validations: {

      selectedRoute: {
        required
      },
}

Ire

May you post your data()? how you initialized selectedRoute? – Hyacinthus

Answer 1

You should bind @change methods:

 <b-form-checkbox v-for="route in busRouteList"
                         v-model.trim="selectedRoute"
                         v-bind:value="route.value"
                         @change="$v.selectedRoute.$touch()">

and you might want to use custom function:

selectedRoute: {
  checked (val) {
    return val
  }
},

Sabir

Answer 2

As false is also valid value so, you should try to use sameAs

import { sameAs } from 'vuelidate/lib/validators'

terms: {
   sameAs: sameAs( () => true ) 
}

Blowtorch

Almost, more like: terms: { sameAs: val => val === true }. – Lovemaking

@Lovemaking your suggestion doesn't work because according to docs: "When provided as a function, it receives the model under validation as argument" not the value. so it is more like terms: { sameAs: vueModel => vueModel.terms === true } In any case, provided solution by the post owner is the best. – Garik

@Garik Read the section about custom validators. It works. I've used and tested that validator for requiring the user to accept a ToS, etc. vuelidate.js.org/#custom-validators – Lovemaking

Answer 3

This worked for me. Basically, you need to make its value 'sameAs' a boolean 'true', which means the checkbox is checked. So, i.e:

privacyCheck: {
  sameAs: sameAs(true)
},

Aquilar

Answer 4

I hope this little example will help you to understand how to validate a checkbox. You have to check when the input is changing. I recommend you to use @change.

In template

<div class="input">
  <label for="country">Country</label>
  <select id="country" v-model="country">
    <option value="usa">USA</option>
    <option value="india">India</option>
    <option value="uk">UK</option>
    <option value="germany">Germany</option>
  </select>
</div>
<div class="input inline" :class="{invalid: $v.terms.$invalid}">
  <input type="checkbox" id="terms" v-model="terms" @change="$v.terms.$touch()">
  <label for="terms">Accept Terms of Use</label>
</div>

So the terms will be valid if selected country will be germany.

validations: {
  terms: {
    checked(val) {
      return this.country === "germany" ? true : val;
    }
  }
}

of course country, terms are defined in data():

country:'',
terms: false

Cobbler

Answer 5

`

validations: {
    terms: {
        checked: (val) => {return val;}
    }
}

`

Homosporous

Answer 6

With vuelidate-next (for both Vue 2 and Vue 3 support) it's so simple as using sameAs built-in validator with true as a direct parameter. For example, when using inside a setup method:

const termsAccepted = ref(false)

const v$ = useVuelidate(
  { termsAccepted: { sameAs: sameAs(true) } },
  { termsAccepted }
)

return { v$, termsAccepted }

Samarasamarang