Updated: January 26, 2022

Inline Errors

Intro

Inline validation provides error feedback in response to user’s data input in a Create or Edit form of a business object. The errors maybe critical in which case, the user should not be allowed to proceed until fixed or it maybe informative still allowing the user to complete editing.

The error should be placed under the related input field and must explain to the user clearly and concisely why the error occurred and how to correct the error.

Inline error in form sheet
Inline error in form sheet

Behavior and Interaction

The inline error can appear if the user has entered incorrect data. The message in the inline error banner should explain the error clearly with suggestions to correct the mistake. The inline error banner disappears once valid data is entered.

Inline error due to missing text entry
Inline error due to missing text entry
Inline error disappears as soon as the data is entered correctly
Inline error disappears as soon as the data is entered correctly

Adaptive Design

The inline error follows the global layout margin of the iOS size classes (compact and regular) and therefore adapts to any iPhone or iPad device and its containers.

Inline error on iPhone and iPad
Inline error on iPhone and iPad