search

noahsalvi / svelte-use-form

The most compact reactive form controller (including Validation) that you'll ever see.
MIT License
252 stars 14 forks source link

Grouped CheckBoxes #34

Closed conoroshea1996 closed 2 years ago

conoroshea1996 commented 2 years ago

Hey, Not sure if Im using this wrong. I can't see and example anywhere. I'm wondering how to handle validation for grouped checkboxes. If for example user must select at least one checkbox. Valid seems to be reset everytime you click the checkbox vs actually checking of the group has any value not sure if that makes sense Is this even possible to do?

I'd expect required to work on a checkbox group and pass if there is any checkboxed checked

Example here

https://www.loom.com/share/129340b652ea48dd8856a9b7ec6edf88

Thanks in advance.

noahsalvi commented 2 years ago

Hey @conoroshea1996

You've probably moved on from this problem. But still... I'll answer it for others to see. 😅

In your example you're using the same name for all 4 checkboxes. This does not work with svelte-use-form, since we use the name attribute as the identifier of the form control. So this code would result in a single form control connected to 4 elements. Thus they all share the same value and unchecking one means that they all are virtually unchecked.

The solution would be to either use radio buttons (if only one can be selected)

or

assign different names to the checkboxes and implement a custom validator that checks that at least one of the inputs is true.