Vee-validate: [Question] Validate checkbox (needs to be checked) with validation provider

[Jones-S]

Hi again.
I am almost done with my form, but again I have a question with validation providers. This time it's about validation on submission. I am currently using a Validation Observer which validates on click and prevents submission if there are still errors.
So far so good – but now I have a gdpr checkbox in the form that needs to be checked and the validation of the form would not throw an error, although I have set the checkbox to required.

The problem is also described elsewhere, that a checkbox on its own can't be validated and that I have to push checkbox values to an array – which I am already doing (which I read here: https://github.com/baianat/vee-validate/issues/1588). Now I would have to check for the checkbox array length. So I tried:

(and btw: I don't know why this actually works: https://baianat.github.io/vee-validate/examples/checkboxes.html – the rule in place is _'required'_)

<ValidationObserver
      ref="observer"
      v-slot="{ invalid }"
      tag="form"
      @submit.prevent="handleSubmit(form)"
    >

      <ValidationProvider
        ref="gdpr"
        v-slot="{ errors }"
        :rules="'required|length:1'"
        name="GDPR"
        mode="lazy"
      >
        <FormField
          v-model="form.gdpr"
          :error-messages="errors"
          name="gdpr"
          label="GDPR"
          type="checkbox"
          :option-items="[{ option_item: 'I agree' }]"
          :placeholder="false"
        />
      </ValidationProvider>
      <button-type="submit" :disabled="invalid">Submit</button>
    </ValidationObserver>

No with the length rule in the validation provider it will prevent submission, but first, it will not validate truthy if the box is checked and also I don't want an error message saying:
Lenght of gdpr must be 1 – I want something like GDPR is required.

So my question: how can I use checkboxes nested within a Validation Provider and validate the form on submission to check if the checkbox is checked or not?

Cheers

[logaretm]

The example in the docs work because they are native checkboxes, so vee-validate knows that unticking them would mean that they violated the required rule if it exists.

You could do the same by passing anything to the required rule to tell it that its a checkbox.

rules="required:true"

This is mentioned here

The required rule parameter is called rejectsFalse which includes the false value in the __"empty values"__ check, the empty values are:

• empty strings.
• empty arrays.
• null or undefined.

False is by default a valid value, for example, a radio button with a yes/no answer would still be considered a valid input value.

Feel free to suggest how I could've made this clearer in the docs, as writing docs for your own work is tricky 😞