Validation states not working on radio, checkbox, form-control-static

[manishtpatel]

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.

[fchiumeo]

Bootstrap Documentacion

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.

[cvrebert]

form-control-static is also affected, apparently.

[yokomizor]

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>

[yokomizor]

@cvrebert I think .form-control-static shouldn't be marked because the user cannot fix this value.

What you think?

[tkrotoff]

@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.

[mdo]

We won't be styling the radio and checkbox inputs.

[danolsavsky]

"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!