Bug fixes: This page contains bug fixes. Please read the change log for more information.

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.

<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="vismaicon vismaicon-sm vismaicon-filled vismaicon-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="vismaicon vismaicon-sm vismaicon-filled vismaicon-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="vismaicon vismaicon-sm vismaicon-filled vismaicon-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

Example
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="vismaicon vismaicon-sm vismaicon-filled vismaicon-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="vismaicon vismaicon-sm vismaicon-filled vismaicon-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

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

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

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