All checkboxes of a checkbox group mandatory

[lbineau]

Is your feature request related to a problem? Please describe.
I'm trying to find a way with "Components" approach to be able to validate when a group of checkboxes with same name have been checked. Currently the rules="required" is checking that at least one checkbox is checked. Is there an easy way to check that all checkboxes of the group are checked?

Describe the solution you'd like
Is there an option to make all fields of a group mandatory? Something like

<Form>
  <Field name="terms" type="checkbox" value="Terms and conditions 1" rules="requiredAll" />
  <Field name="terms" type="checkbox" value="Terms and conditions 2" rules="requiredAll" />
</Form>

[x] Terms and conditions 1
[x] Terms and conditions 2
=> passes

[] Terms and conditions 1
[] Terms and conditions 2
=> fails

[] Terms and conditions 1
[x] Terms and conditions 2
=> fails

Describe alternatives you've considered

• Writing a cross field validation but it is technically the same field so I'm not sure how I can actually check: https://vee-validate.logaretm.com/v4/guide/global-validators/#cross-field-validation

[hanzelkatomas]

Use rules="required" on each field and then both fields are required.

[lbineau]

Hello @hanzelkatomas,
Thanks for taking time to reply to my issue.
Are you sure it works the same for checkboxes with the same name?
I did a reproduction and it behaves like what I described. Even when all checkboxes with the same name are required and 1 checkbox only is checked, the test succeeds.

https://stackblitz.com/edit/vee-validate-v4-checkboxes-r4z6y5?file=src%2FApp.vue

[hanzelkatomas]

Follow this example:
https://stackblitz.com/edit/vee-validate-v4-checkboxes-wvbtku?file=src%2FApp.vue

You have to use different names for different inputs. Also each input should have it's own error message component.
Also, you should rather use validation schema (yup, zod, valibot), than this field level rules. It's the modern way of how forms validation is done today. You can pass validation-schema object to <Form> component.
More on this here: https://vee-validate.logaretm.com/v4/guide/components/validation/#validation-schemas-with-yup

[lbineau]

@hanzelkatomas In my usecase I have to use the same name (which is possible with HTML5 and VeeValidate), that's why I specifically asked for help with the same name.
I'm asking to mimic what is possible with native HTML, same name and fields that can be required individually.
Example with HTML5 validation: https://stackblitz.com/edit/stackblitz-starters-mdjh8u?description=HTML/CSS/JS%20Starter&file=index.html&terminalHeight=10&title=Static%20Starter

In my case I cannot use validation-schema in my use case as each field is responsible for its own validation and I cannot put it on the <Form> component level which is unaware of the children in the CMS.

[hanzelkatomas]

If you are going to use same name for multiple inputs, then vee-validate is going to treat them as one input (if all checkboxes have the same "value" attribute). Then if you check one checkbox, the other checkboxes with the same name are gonna be checked. It's expected that different inputs have different name and you should implement your form with that in your mind.

If you really need have the same name property (which you shouldn't), then you can try this validation:
https://stackblitz.com/edit/vee-validate-v4-checkboxes-wvbtku?file=src%2FApp.vue

[lbineau]

Thanks for helping!
The length:3 that you recommend is interesting if I manage to have a Checkbox group component that would be aware of how many checkboxes it have and all of them are mandatory.

I think you are talking none sense for checkbox names though, it is completely possible to have the same name for different checkbox. It is possible with native HTML and VeeValidate, so there no reason I "shouldn't use this".
The only difference is the model will be an array or a single value exactly like Vue v-model for checkboxes.
So this is not my point and I'll stop the debate about this topic.

[lbineau]

It seems my usecase evolved so the length:3 is not enough as it should be able to handle both mandatory and optional options so I'm still not sure how to achieve that.