Document radio and checkbox validation states
Created by: zacechola
#10522 (closed) 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.