All checkboxes of a checkbox group mandatory about vee-validate HOT 7 OPEN

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

from vee-validate.

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

from vee-validate.

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

from vee-validate.

@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.

from vee-validate.

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

from vee-validate.

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.

from vee-validate.

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.

from vee-validate.