Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

B-form-checkbox-group required attribute makes all boxes required

See original GitHub issue

Describe the bug

B-form-checkbox-group required makes all boxes required.

Steps to reproduce the bug

Put required attribute on b-form-checkbox-group in a form tag. Unless you select all boxes you can’t submit form because of validation error.

Expected behavior

Select one of the options and be able to submit form.

Versions

Libraries:

BootstrapVue: 2.13.0
Bootstrap: 4.4.1
Vue: 2.6.11

Environment:

Device: Mac
OS: macOS
Browser: Chrome
Version: 80.0

Issue Analytics

State:
Created 3 years ago
Comments:8 (5 by maintainers)

Top GitHub Comments

8reactions

Hiwscommented, May 5, 2020

You could potentially do something like this, this should remove the required attribute from the checkboxes once one option have been selected.

<b-checkbox-group v-model="selected" :required="selected.length === 0">
</b-checkbox-group>

0reactions

janswistcommented, May 5, 2020

In that type of situation, you wouldn’t use required, and instead use a custom validation to check that at least boxes are checked.

The required attribute would be used in the situation where someone has to click all checkboxes to proceed (i.e. “I have read the terms and conditions” + “I agree to the privacy policy” + “I agree to cookies”)

Got it. Well, so there you have a potentially new feature to think about - I think many users would appreciate html-based any-checkbox validation. Or even something like :required="numberOfRequiredChecks" (basically the same as @Hiws solution). Anyway, thanks for fast reply!