Validate a required boolean in Vue
This is useful when validating that checkboxs have been ticked.
Required booleans
Let’s say you have a checkbox that you need your users to click on before proceeding —like accepting some ToS or agreeing to something.
This falls on the realm of form validation, and there is nothing better than Vuelidate for that.
If you already know some Vuelidate you might be tempted to go with something like:
<!-- template... -->
<script>
import { required } from 'vuelidate/lib/validators'
export default {
data () {
return {
hasAccepted: false
}
},
validations: {
hasAccepted: { required }
}
}
</script>
But you just can’t use the required validator on a checkbox —or switch. That’s because that’s a boolean.
The model for those would contain a boolean value,
true
or false
, and either would make the validation
pass since those values are different from other values
the model can contain, such as null
or undefined
.
What we need to check here, is whether the value of the
model is equal to true
or not.
Let’s do something like this instead:
<!-- template... -->
<script>
// import { required } from 'vuelidate/lib/validators'
export default {
data () {
return {
hasAccepted: false
}
},
validations: {
hasAccepted: {
accepted: val => val === true
}
}
}
</script>
Source code
Here is the source code for a working example:
<template lang="pug">
.simple-required-boolean-good.mb-8
v-card
v-card-title Example #2
v-card-text
v-switch(
v-model="$v.hasAccepted.$model"
:error="$v.hasAccepted.$error"
:hint="hintText"
label="Do you accept?"
persistent-hint
)
v-checkbox(
v-model="$v.hasAccepted.$model"
:error="$v.hasAccepted.$error"
:hint="hintText"
label="Do you accept?"
persistent-hint
)
</template>
<script>
export default {
data () {
return {
hasAccepted: false
}
},
computed: {
hintText () {
const value = `value: ${this.hasAccepted}`
const invalid = `invalid: ${this.$v.hasAccepted.$invalid}`
const error = `error: ${this.$v.hasAccepted.$error}`
return `${value} -> ${invalid} -> ${error}`
}
},
validations: {
hasAccepted: {
accepted: val => val === true
}
}
}
</script>
That’s it! :sunglasses: