Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Mike Harrison
Mike Harrison
3,147 Points
Posted by Mike Harrison
Mike Harrison
3,147 Points

Bootstrap Form Validation - how to validate checkbox with the invalid message saying "Please tick at least 1 box".

Using the 'What Topics Interest you the most?" checkbox from this video - how would you validate the checkboxes correctly?

Currently - they are all valid when the form is submitted. How can I include an invalid message saying "Please tick at least 1 box"? Is there a method to do this within Bootstrap or will I need to find another method?

<h5 class="mb-4">Which Topics Interest You Most?</h5>

              <div class="form-check">
                <label class="custom-control custom-checkbox">
                  <input name="topics" type="checkbox" class="custom-control-input">
                  <span class="custom-control-indicator"></span>
                  <span class="custom-control-description">JavaScript Frameworks</span>
                </label>
              </div>
              <div class="form-check">
                <label class="custom-control custom-checkbox">
                  <input name="topics" type="checkbox" class="custom-control-input">
                  <span class="custom-control-indicator"></span>
                  <span class="custom-control-description">JavaScript Libraries</span>
                </label>
              </div>
              <div class="form-check">
                <label class="custom-control custom-checkbox">
                  <input name="topics" type="checkbox" class="custom-control-input">
                  <span class="custom-control-indicator"></span>
                  <span class="custom-control-description">Node.js</span>
                </label>
              </div>
              <div class="form-check">
                <label class="custom-control custom-checkbox">
                  <input name="topics" type="checkbox" class="custom-control-input">
                  <span class="custom-control-indicator"></span>
                  <span class="custom-control-description">Build Tools</span>
                </label>
              </div>
              <div class="form-check">
                <label class="custom-control custom-checkbox">
                  <input name="topics" type="checkbox" class="custom-control-input">
                  <span class="custom-control-indicator"></span>
                  <span class="custom-control-description">ES2015</span>
                </label>
              </div>

1 Answer

Gari Merrifield
Gari Merrifield
9,598 Points
Gari Merrifield
Gari Merrifield
9,598 Points

Not sure if you are after client or server side validation. Either way, you probably want to loop through the group of checkboxes, and if any of them have a check, consider the input valid, if none are checked, then call it invalid. Client side, you could use JavaScript to test for the "checked" status on each checkbox in the group.

The following URL seems to be similar enough to what you are doing, that it could give you some ideas for your own project : http://formvalidation.io/examples/awesome-bootstrap-checkbox/

Also found this one that may be useful : https://github.com/1000hz/bootstrap-validator/issues/201