Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FR: Multiple checkboxes #73

Open
jan-dh opened this issue Mar 13, 2018 · 6 comments
Open

FR: Multiple checkboxes #73

jan-dh opened this issue Mar 13, 2018 · 6 comments

Comments

@jan-dh
Copy link

jan-dh commented Mar 13, 2018

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.

@Boldewyn
Copy link
Contributor

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

@jan-dh
Copy link
Author

jan-dh commented Apr 19, 2018

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

@Boldewyn
Copy link
Contributor

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.

@jan-dh
Copy link
Author

jan-dh commented Apr 19, 2018

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

@jan-dh
Copy link
Author

jan-dh commented Jun 15, 2018

Any progress on this?

@or3lie
Copy link

or3lie commented Jan 16, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants