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.

Conveying validation state to assistive technologies and colorblind users

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.

A block of help text that breaks onto a new line and may extend beyond one line.
{% highlight html %}
A block of help text that breaks onto a new line and may extend beyond one line.
{% endhighlight %}

With optional icons

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.

Icons, labels, and input groups

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.

Conveying the icon's meaning to assistive technologies

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.

(success)
(warning)
(error)
@
(success)
{% highlight html %}
(success)
(warning)
(error)
@
(success)
{% endhighlight %}

Optional icons in horizontal and inline forms

(success)
@
(success)
{% highlight html %}
(success)
@
(success)
{% endhighlight %}
(success)

@
(success)
{% highlight html %}
(success)
@
(success)
{% endhighlight %}

Optional icons with hidden .sr-only labels

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

(success)
@
(success)
{% highlight html %}
(success)
@
(success)
{% endhighlight %}