Validation states not working on radio, checkbox, form-control-static
manishtpatel opened this issue · 7 comments
Validatio states should work the same for radio and checkboxes as well. If applied .has-error class on .form-group containing radio and/or checkboxes should apply styles on them as well. It is not happening right now.
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.
form-control-static is also affected, apparently.
IMO it's right. You just have to mark your label with .control-label class.
Maybe it just needs some doc improves.
<label class="radio control-label">
<input type="radio"> Italian
</label>@cvrebert I think .form-control-static shouldn't be marked because the user cannot fix this value.
What you think?
@mdo fix does not change the input radio/checkbox itself.
All other form elements change their border color when has-* is present except input radio/checkbox:
To fix this, CSS outline should be used since input radio/checkbox don't have a border:
.has-error input[type="radio"] {
outline: 1px solid @state-danger-text;
}It does not look great inside the browser (Chrome 34 Win7) but at least it is coherent with the other form inputs.
We won't be styling the radio and checkbox inputs.
"We won't be styling the radio and checkbox inputs." - Yet another bad practice for usability and accessibility. @tkrotoff Fantastic solution! We've found having the border around individual checkboxes in a group becomes rather cumbersome. Instead, we wrap a field set or div (whichever is most semantically applicable) around them and add our red border to that. Cheers!