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

Checkboxes and radio buttons

Required fields

For a required field, use .required class on the .form-group div. Follow the example code from the right panel.

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

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