Menu icon Foundation
Abide Validation on Checkbox doesn't group

In the current version of Abide the checkbox required validation seems to work differently then expected. Given the following code

<label for="checkbox1" class="error"><input type="checkbox" id="1" required=""> Option 1</label>
<label for="checkbox1" class="error"><input type="checkbox" id="2" checked="" required=""> Option 2</label>
<label for="checkbox1" class="error"><input type="checkbox" id="3" required="" data-invalid="">Option 3</label>

All three checkbox options must be selected for it to be valid. I think it would be more useful if it validated like it does with a radio button where it groups by name and checks for at least one selected option. There is a closed pull request to add this at https://github.com/zurb/foundation/pull/3157

Does anyone have a reason to not group by name and keep the current functionality?

foundation5abideCheckboxvalidation

In the current version of Abide the checkbox required validation seems to work differently then expected. Given the following code

<label for="checkbox1" class="error"><input type="checkbox" id="1" required=""> Option 1</label>
<label for="checkbox1" class="error"><input type="checkbox" id="2" checked="" required=""> Option 2</label>
<label for="checkbox1" class="error"><input type="checkbox" id="3" required="" data-invalid="">Option 3</label>

All three checkbox options must be selected for it to be valid. I think it would be more useful if it validated like it does with a radio button where it groups by name and checks for at least one selected option. There is a closed pull request to add this at https://github.com/zurb/foundation/pull/3157

Does anyone have a reason to not group by name and keep the current functionality?

Mario about 5 years ago

This problem does still exist. It is highly unregular and annoying.

Rafi Benkual about 4 years ago

This should in version 5.5.2. There have been tons of updates to Abide. Can you confirm?

Dhairya Thanawala about 4 years ago

I found the solution here - http://stackoverflow.com/questions/26890023/display-error-if-no-checkbox-is-checked-in-checkbox-group

The issue that i faced is, onblur was not working for me as i had checkbox in different divs. I have created a fiddle - http://jsfiddle.net/thanawalad/L894vk66/8/

So to overcome the onblur issue, i modified the foundation.abide.js file.

Download it from here - https://www.dropbox.com/s/5ylpx20itm6i3en/foundation.abide.js?dl=0

I have provided comments so you can understand where i have made the changes.

Hope it helps.