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
      },
}

May you post your data()? how you initialized selectedRoute? — Kevin Batongbakal, Jul 06 '18 at 01:12

score 20 · Answer 1 · edited Jun 16 '20 at 04:37

20

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

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

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

edited Jun 16 '20 at 04:37

Darryl Hein

142,451
95
218
261

answered Nov 13 '19 at 12:57

gem007bd

1,085
13
11

2

Almost, more like: `terms: { sameAs: val => val === true }`. – zenw0lf Jan 29 '20 at 03:21
1

@zenw0lf 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. – icosmin Oct 29 '20 at 01:20
@icosmin Read the section about custom validators. It works. I've used and tested that validator for requiring the user to accept a ToS, etc. https://vuelidate.js.org/#custom-validators – zenw0lf Dec 04 '20 at 17:12

score 5 · Accepted Answer · answered Jul 06 '18 at 01:26

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
  }
},

score 3 · Answer 3 · answered Sep 17 '21 at 15:47

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)
},

answered Sep 17 '21 at 15:47

Luca Grandicelli

76
4

score 2 · Answer 4 · answered Jun 02 '19 at 16:22

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

score 1 · Answer 5 · answered Apr 07 '21 at 18:38

1

`

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

`

answered Apr 07 '21 at 18:38

user2624297

19
1

score 0 · Answer 6 · answered Feb 22 '21 at 14:44

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 }

Vuelidate check box validation

6 Answers6