Form validation

Form validation gives feedback about invalid user input when the user submits a form.

Usage

When to use

Use a form validation in the following cases:

  • When there are required input controls.
  • When there is user input that carries a risk for invalid input.
  • When a form contains dependencies between input controls.

Types

The type of form validation depends on the choice of the input component. There are the following form validation types:

Standard validation

A validation can occur when for example:

  • The datatype isn’t correct.
  • The entered data has too many or not enough characters.
  • No data has been entered in a required field.

form-validation-usage-types-input

Text input as an example for standard validation

form-validation-usage-types-form-group

Form group as an example for standard validation

Selection group validation

A validation text can occur when for example:

  • Nothing has been selected.
  • Too much has been selected.
  • Not enough has been selected.

form-validation-usage-types-radio-button

Checkbox group validation example

General construction

A form validation consists of the following elements:

form-validation-usage-general

1. Message, 2. Inline validation, 3. Indicator line, 4. User input, 5. Validation text

1. Message

  • An error message is displayed above the form and below the content header.
  • For more information on messages, see chapter Message.

2. Inline validation

  • An inline validation informs the user about errors relevant to a specific user input.
  • An inline validation consists of the elements 3. – 5. listed below.

3. Indicator line

  • The indicator line visually highlights an inline validation.

4. User input

  • The user input is in the validation state.

5. Validation text

  • A validation text contains an explanation how to resolve the error.
  • The validation text and the arrow icon are an anchor link to the corresponding input field.

Behavior

General

After the user submits a form the page reloads and the viewport jumps to the top. If there is an error, a message appears above the form. This message states a general problem or summarizes multiple errors. The message is persistent until the form is resubmitted without rejection.

form-validation-behavior-message

Error message above the form

The validation text and the arrow icon are clickable. They link to the corresponding field and on click the related input control is selected.

form-validation-usage-behavior-arrow

Validation text with mouseover

If controls have a description, the description text is not highlighted.

form-validation-usage-types-checkbox-description

Checkbox group with descriptions

Fieldset

A fieldset containing an error, expands after validation of the form.

form-validation-usage-behavior-fieldset-open

Expanded fieldset with validation

If the user collapses a fieldset with an error, an indicator line appears.

form-validation-usage-behavior-fieldset

Collapsed fieldset with validation

Form group responsive behavior

A form group has one common description. All validation texts are listed below the description.

form-validation-usage-behavior-group1

Form group on a large screen

When scaling down the viewport all form elements of a group take on the same width and order vertically below each other. The common description and all validation texts are listed below the last form element.

form-validation-usage-behavior-group2

Form group on a small screen

Do’s & Don’ts

form-validation-usage-do-dont-text

  • Use a validation text to tell the user what went wrong and why it went wrong.
  • Don’t make the user guess why the error occurred.

Style

This chapter shows several form validation styles in the design system.

Overview

Examples

form-validation-style-overview-text-input

Text input

form-validation-style-overview-select

Select

form-validation-style-overview-combobox

Combo box

form-validation-style-overview-radiobutton

Radio button group

form-validation-style-overview-checkbox

Checkbox group

Descriptions

form-validation-style-overview-checkbox-description

Checkbox group with additional information through description texts

Fieldset

form-validation-style-overview-fieldset

1. Expanded fieldset, 2. Collapsed fieldset with indicator line

Responsive behavior

form-validation-style-overview-desktop

Example implementation of a form in desktop screen size

form-validation-style-overview-mobile

Example implementation of a form in mobile screen size

Typography

The following table gives reference to the different font sizes and weights:

NameStateFont-familyFont-sizeLine-heightText-align
Validation texterrorSiemens Sans Roman13px17pxleft

Sizing and spacing

The following measurements show the dimensions for this component:

form-validation-style-sizing

Sizing for form validation

form-validation-style-spazing-input

Spacing for form validation in a form group

Form validation

Form validation title

This is an example explanation for form validation.

Validation

There are some problems with your input. Please correct them below.
Enter at least 8 characters.
Enter at least 8 characters.
Enter digits.
Enter at least one character.
Select a country.
Enter at least one sentence.
Select one option.
Select at least one option.
* Required fields

Usage

ElementClassDescription
.form__formGroup .has-error Marks the form group with a red indicator line on the left.
.form__formGroup.has-error .inputGroup .is-invalid Marks the erroneous form element with a red text color and/or a red border.
.inputGroup__label.is-required Marks the form element as a required field with a red asterisk after the label.
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top