Validation
Form validation ensures that the user enters the data that is required and in a correct format, by highlighting errors in their input. This is of equal importance for checkboxes, radio buttons and other form elements. Read more about validation in the UX Guidelines.
We included validation styles on form controls. To use, add .has-error
to the parent element. Any .control-label
, .form-control
, and .help-block
within that element will receive the validation styles.
Inputs, selects and textareas
<div class="form-group has-error">
<label class="control-label col-sm-4" for="inputError1">Input with error</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputError1">
</div>
</div>
Checkboxes and radio buttons
<div class="form-group has-error">
<div class="checkbox col-sm-8 offset-sm-4">
<input type="checkbox" id="checkboxError" value="option1">
<label for="checkboxError">Checkbox with error</label>
</div>
</div>
<div class="form-group has-error">
<div class="radio col-sm-8 offset-sm-4">
<input type="radio" id="radioError" value="option1">
<label for="radioError">Radio with error</label>
</div>
</div>
Required fields
For a required field, use .required
class on the .form-group
div.
<form class="form-horizontal">
<div class="form-group required">
<label for="inputEmail" class="col-sm-8 control-label">Email</label>
<div class="col-sm-8">
<input class="form-control" id="inputEmail" placeholder="Email" type="text">
</div>
</div>
</form>