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.
The type of form validation depends on the choice of the input component. There are the following form validation types:
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.
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.
A form validation consists of the following elements:
- 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.
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.
The validation text and the arrow icon are clickable. They link to the corresponding field and on click the related input control is selected.
If controls have a description, the description text is not highlighted.
A fieldset containing an error, expands after validation of the form.
If the user collapses a fieldset with an error, an indicator line appears.
Form group responsive behavior
A form group has one common description. All validation texts are listed below the description.
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.
Do’s & Don’ts
- 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.
This chapter shows several form validation styles in the design system.
The following table gives reference to the different colors and shades:
Please refer to the specific component pages for specific style details on each element.
|Indicator line||error||Foreground color||Functional red|
|Form border||error||Border color||Validation red|
|Form input value||error||Foreground color||Validation red|
|Validation text||error||Foreground color||Validation red|
|Validation arrow icon||error||Foreground color||Validation red|
The following table gives reference to the different font sizes and weights:
|Validation text||error||Siemens Sans Regular||13px||17px||left|
Sizing and spacing
The following measurements show the dimensions for this component: