Breaking Changes: This page contains breaking changes. Please read the change log carefully.

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.

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">
			<input class="form-control" id="inputErrorInline" type="text" aria-describedby="inputErrorInlineHelp">
			<span id="inputErrorInlineHelp" 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>
	<div class="form-group has-error">
		<label class="control-label col-sm-4" for="selectErrorInline">Select with error</label>
		<div class="col-sm-8">
			<select class="form-control" id="selectErrorInline" aria-describedby="selectErrorInlineHelp">
				<option>Option 1</option>
				<option>Option 2</option>
			</select>
			<span id="selectErrorInlineHelp" 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>
	<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" aria-describedby="textareaErrorInlineHelp"></textarea>
				<span class="textarea-counter"><span class="textarea-counter-current">0</span> /<span class="textarea-counter-max">120</span></span>
			</div>
			<span id="textareaErrorInlineHelp" 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>

Checkboxes and radio buttons

Add .has-error to the parent .form-group. Use the inline .help-block shown above for the error message — it applies to checkboxes and radio buttons exactly as it does to the other controls, and it is the pattern the consumer documentation recommends.

The example below shows the legacy tooltip variant, retained for backwards compatibility while input, select and textarea lose it in v3.0. It is mouse-only: the icon is a non-focusable <span> revealed on hover, so keyboard and screen-reader users cannot reach the message. Prefer the inline .help-block for new work.

Example
HTML

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>

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>