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.
Using these validation styles to denote the state of a form control only provides a visual, color-based indication, which will not be conveyed to users of assistive technologies - such as screen readers - or to colorblind users.
Ensure that an alternative indication of state is also provided. For instance, you can include a hint about state in the form control's <label>
text itself (as is the case in the following code example), include a Glyphicon (with appropriate alternative text using the .sr-only
class - see the Glyphicon examples), or by providing an additional help text block. Specifically for assistive technologies, invalid form controls can also be assigned an aria-invalid="true"
attribute.
You can also add optional feedback icons with the addition of .has-feedback
and the right icon.
Feedback icons only work with textual <input class="form-control">
elements.
Manual positioning of feedback icons is required for inputs without a label and for input groups with an add-on on the right. You are strongly encouraged to provide labels for all inputs for accessibility reasons. If you wish to prevent labels from being displayed, hide them with the .sr-only
class. If you must do without labels, adjust the top
value of the feedback icon. For input groups, adjust the right
value to an appropriate pixel value depending on the width of your addon.
To ensure that assistive technologies – such as screen readers – correctly convey the meaning of an icon, additional hidden text should be included with the .sr-only
class and explicitly associated with the form control it relates to using aria-describedby
. Alternatively, ensure that the meaning (for instance, the fact that there is a warning for a particular text entry field) is conveyed in some other form, such as changing the text of the actual <label>
associated with the form control.
Although the following examples already mention the validation state of their respective form controls in the <label>
text itself, the above technique (using .sr-only
text and aria-describedby
) has been included for illustrative purposes.
.sr-only
labelsIf you use the .sr-only
class to hide a form control's <label>
(rather than using other labelling options, such as the aria-label
attribute), Bootstrap will automatically adjust the position of the icon once it's been added.