hyperform
hyperform copied to clipboard
FR: Multiple checkboxes
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.
Connected with #6, where we need that functionality anyway for clean radio button support.
I feel like radio buttons should never by required since by default they have a value.
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.
That would be a nice solution indeed, same for the checkbox-groups.
Any progress on this?
hi, is there any news on this subject, I need to validate my checkboxes by group as well, thanks