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.
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
<form class="form-horizontal col-md-8">
<div class="form-group has-error">
<label class="control-label col-sm-4" for="inputError1">Input with error</label>
<div class="col-sm-8 example-tooltip-show">
<input class="form-control example-trigger-focused" id="inputError1" type="text" data-toggle="popover" data-trigger="focus" title="" data-original-title="Error text placed here">
<span class="spirisicon spirisicon-sm spirisicon-filled spirisicon-error" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip with an error placed on right"></span>
</div>
</div>
<div class="form-group has-error">
<label class="control-label col-sm-4" for="selectError1">Select with error</label>
<div class="col-sm-8 example-tooltip-show">
<select class="form-control example-trigger-focused" id="selectError1" data-toggle="popover" data-trigger="focus" title="" data-original-title="Error text placed here" style="min-width: auto;">
<option>Option 1</option>
<option>Option 2</option>
</select>
<span class="spirisicon spirisicon-sm spirisicon-filled spirisicon-error" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip with an error placed on right"></span>
</div>
</div>
<div class="form-group has-error">
<label class="control-label col-sm-4" for="textareaError1">Textarea with error</label>
<div class="col-sm-8 example-tooltip-show">
<textarea class="form-control example-trigger-focused" id="textareaError1" style="resize: vertical;"></textarea>
<span class="spirisicon spirisicon-sm spirisicon-filled spirisicon-error" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip with an error placed on right"></span>
</div>
</div>
</form>
Checkboxes and radio buttons
<form class="form-horizontal col-md-8">
<div class="form-group has-error">
<div class="example-tooltip-show">
<div class="checkbox">
<input id="checkboxError" class="example-trigger-focused" value="option1" type="checkbox">
<label for="checkboxError" data-toggle="popover" data-trigger="focus" title="" data-original-title="Error text placed here">Checkbox with error</label>
<span class="spirisicon spirisicon-sm spirisicon-filled spirisicon-error" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip with an error placed on right"></span>
</div>
</div>
</div>
<div class="form-group has-error">
<div class="">
<div class="radio example-tooltip-show">
<input class="example-trigger-focused" id="radioError" value="option1" type="radio">
<label for="radioError" data-toggle="popover" data-trigger="focus" title="" data-original-title="Error text placed here">Radio with error</label>
<span class="spirisicon spirisicon-sm spirisicon-filled spirisicon-error" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip with an error placed on right"></span>
</div>
</div>
</div>
</form>
Required fields
For a required field, use .required class on the .form-group div.
<form class="form-horizontal col-md-8">
<div class="form-group required">
<label for="inputEmail" class="col-sm-3 control-label">Email</label>
<div class="col-sm-9">
<input class="form-control" id="inputEmail" placeholder="Email" type="text">
</div>
</div>
<div class="form-group required">
<label for="inputFirstName" class="col-sm-3 control-label">First name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputFirstName" placeholder="First name">
</div>
</div>
<div class="form-group">
<label for="inputLastName" class="col-sm-3 control-label">Last name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputLastName" placeholder="Last name">
</div>
</div>
</form>
For a required field, use .required class on the .form-group div.
<form role="form" class="row form-horizontal">
<fieldset class="col-xxl-6">
<legend>Form group heading 1</legend>
<div class="form-group">
<label class="col-sm-4 control-label" for="inputEmail2">Email</label>
<div class="col-sm-8">
<input type="email" placeholder="Email" id="inputEmail2" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="Quisque">Quisque</label>
<div class="col-sm-8">
<select id="Quisque" class="form-control">
<option>Quisque 1</option>
<option>Quisque 2</option>
<option>Quisque 3</option>
</select>
</div>
</div>
<div class="form-group disabled">
<label class="col-sm-4" for="Disabled">Disabled</label>
<div class="col-sm-8">
<input type="text" id="Disabled" class="form-control" placeholder="Disabled" disabled="">
</div>
</div>
</fieldset>
<fieldset class="col-xxl-6">
<legend>Form group heading 2</legend>
<div class="form-group">
<label class="col-sm-4 control-label" for="input13">Curabitur aliquet</label>
<div class="col-sm-8">
<input type="text" placeholder="Curabitur aliquet" id="input13" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="input14">Pellentesque</label>
<div class="col-sm-8">
<input type="text" placeholder="Pellentesque" id="input14" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-4" for="input15">Sed tempus</label>
<div class="col-sm-8">
<input type="text" placeholder="Sed tempus" id="input15" class="form-control">
</div>
</div>
</fieldset>
<fieldset class="col-xxl-6">
<legend>Form group heading 3</legend>
<div class="form-group required">
<label class="col-sm-4 control-label" for="input16">Ut pulvinar</label>
<div class="col-sm-8">
<input type="text" placeholder="Ut pulvinar" id="input16" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="input17">Proin vitae</label>
<div class="col-sm-8">
<input type="text" placeholder="UProin vitae" id="input17" class="form-control">
</div>
</div>
<div class="form-group required">
<label class="col-sm-4 control-label" for="Donec">Donec auctor</label>
<div class="col-sm-8">
<select id="Donec" class="form-control">
<option>Donec 1</option>
<option>Donec 2</option>
<option>Donec 3</option>
</select>
</div>
</div>
</fieldset>
<fieldset class="col-xxl-6">
<legend>Form group heading 4</legend>
<div class="form-group">
<label class="col-sm-4 control-label" for="input18">In facilisis</label>
<div class="col-sm-8">
<input type="text" placeholder="Curabitur aliquet" id="input18" class="form-control">
</div>
</div>
<div class="form-group required">
<label class="col-sm-4 control-label" for="input19">Nunc eget</label>
<div class="col-sm-8">
<input type="text" placeholder="Nunc eget" id="input19" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-4" for="input20">Sed tempus</label>
<div class="col-sm-8">
<input type="text" placeholder="Sed tempus" id="input20" class="form-control">
</div>
</div>
</fieldset>
</form>