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>