Document radio and checkbox validation states

[zacechola]

#10522 added contextual validation states to .radio, .checkbox, .radio-inline and .checkbox-inline.

However, the docs are a bit unclear on what needs to be done to add the classes:

Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add .has-warning, .has-error, or .has-success to the parent element. Any .control-label, .form-control, and .help-block within that element will receive the validation styles.

Mainly at issue is adding the has-* contextual classes to the "parent" element. Parent to what? In the case of labels, it's the parent to the .control-label , as 15c7e5f makes clear.

So adding the following doesn't work (nor do I think it makes much sense):

<div class="checkbox has-error">
  <label>
    <input type="checkbox" value="">
    Option one is this and that—be sure to include why it's great
  </label>
</div>

The above case is a copy of the the docs for checkboxes, which don't have (or need) the .control-label class on the label.

A solution would be to add the .control-label class to the label:

<div class="checkbox has-error">
  <label class="control-label">
    <input type="checkbox" value="">
    Option one is this and that—be sure to include why it's great
  </label>
</div>

But what is more likely the desired behavior is to target a group of inputs, where a div with the contextual class wraps the entire group of inputs:

<div class="has-warning">
  <label class="checkbox-inline">
    <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
  </label>
  <label class="checkbox-inline">
    <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
  </label>
  <label class="checkbox-inline">
    <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
  </label>
</div>

This is a long post to start a (hopefully) brief discussion about which way to document this, if at all.

[cvrebert]

Closing since #14011 was merged.