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.

Demo enabled on this page! The enhanced keyboard-focus behaviour is active on this page — the .keyboard-focus class is added to each .form-group while a control is keyboard-focused, and removed on blur, click or typing. Try pressing Tab to navigate through the form fields. Read more in the Forms accessibility guidelines.

Enhanced mode

Inputs, selects and textareas

Add .has-error to the parent .form-group. Inputs, selects, and textareas display errors inline below the field using .help-block with an alert icon. The legacy tooltip-based pattern below is deprecated for removal in v3.0.

Example
HTML

development/documentation/docs/validation/examples/validation-inputs-inline.html

<form class="form-horizontal col-md-8">
	<div class="form-group has-error">
		<label class="control-label col-sm-4" for="inputErrorInline">Input with error</label>
		<div class="col-sm-8 example-tooltip-show">
			<input class="form-control example-trigger-focused" id="inputErrorInline" 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="selectErrorInline">Select with error</label>
		<div class="col-sm-8 example-tooltip-show">
			<select class="form-control example-trigger-focused" id="selectErrorInline" 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="textareaErrorInline">Textarea with error</label>
		<div class="col-sm-8">
			<div class="textarea-wrapper">
				<textarea class="form-control" id="textareaErrorInline" rows="3" maxlength="120"></textarea>
				<span class="textarea-counter"><span class="textarea-counter-current">0</span> /<span class="textarea-counter-max">120</span></span>
			</div>
			<span class="help-block d-flex align-items-center gap-4"><span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-filled spirisicon-alert"></span> Error text placed here</span>
		</div>
	</div>
</form>

development/documentation/docs/validation/examples/validation-checkboxes.html

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

Deprecated (v2.5): The tooltip-based error display pattern for input, select, and textarea is deprecated and will be removed in v3.0. Use inline error messages with .help-block below the field instead (as shown above). The tooltip pattern for checkboxes and radio buttons is unchanged for now.

Example
HTML

development/documentation/docs/validation/examples/validation-inputs.html

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

Required fields

For a required field, use .required class on the .form-group div.

Example
HTML

development/documentation/docs/validation/examples/required-fields.html

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

Example
HTML

Form group heading 1

Quisque

Disabled

Form group heading 2

Curabitur aliquet

Pellentesque

Sed tempus

Form group heading 3

Ut pulvinar

Proin vitae

Donec auctor

Form group heading 4

In facilisis

Nunc eget

Sed tempus

development/documentation/docs/validation/examples/required-fields-complex.html

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

Validation

Inputs, selects and textareas

Checkboxes and radio buttons

Tooltip error display (deprecated)

Required fields