hyperform icon indicating copy to clipboard operation
hyperform copied to clipboard

FR: Multiple checkboxes

Open jan-dh opened this issue 6 years ago • 6 comments

I know it's not supported in the native HTML5 validation API but at this point this is the only thing that really prevents me from using this as my default validation option. Having a checkbox group with multiple inputs with the same name like this:

<input type="checkbox" id="checkboxGroup1" name="checkboxGroup" value="Checkbox 1" required="">
<label for="checkboxGroup161">Checkbox 1</label></div>
<input type="checkbox" id="checkboxGroup2" name="checkboxGroup" value="Checkbox 2" required="">
<label for="checkboxGroup162"></label></div>
<input type="checkbox" id="checkboxGroup3" name="checkboxGroup" value="Checkbox 3" required="">
<label for="checkboxGroup163"></label></div>

It would be nice to group elements in some way. I don't mind all input fields getting an error class but only one error message per form name would be really nice. One option checked should also validate the sibling checkboxes.

jan-dh avatar Mar 13 '18 21:03 jan-dh

Connected with #6, where we need that functionality anyway for clean radio button support.

Boldewyn avatar Apr 17 '18 11:04 Boldewyn

I feel like radio buttons should never by required since by default they have a value.

jan-dh avatar Apr 19 '18 07:04 jan-dh

But the value can be empty. The WHATWG spec actually loses some words about that. So basically, this:

<label><input type="radio" name="foo" value="" checked required>Select one</label>
<label><input type="radio" name="foo" value="1">Maccharoni</label>
<label><input type="radio" name="foo" value="2">Cheese</label>

is, from a validation point of view, identical to

<select name="foo" required>
<option value="" selected>Selecto one</option>
<option value="1">Maccharoni</option>
<option value="2">Cheese</option>
</select>

As such, the validation and error message display should work identically, i.e., once for the whole “radio button group”.

My idea to fix your problem is a new setting, something like groupByName, that would do the same for all other elements with the same name. So, if you call

hyperform(window, {
  groupByName: true,
});

the behaviour should be like described, one error message per group of input elements with the same name and mutually triggered validation. It would then simply piggyback on the type=radio code.

Boldewyn avatar Apr 19 '18 07:04 Boldewyn

That would be a nice solution indeed, same for the checkbox-groups.

jan-dh avatar Apr 19 '18 09:04 jan-dh

Any progress on this?

jan-dh avatar Jun 15 '18 07:06 jan-dh

hi, is there any news on this subject, I need to validate my checkboxes by group as well, thanks

or3lie avatar Jan 16 '23 15:01 or3lie