Skip to main content
OutSystems

How to display input validation messages in a custom location

Question

By default, input validation messages are shown next or below the corresponding inputs.

Is it possible to show the messages in another location to meet business or design requirements?

Answer

To display input validation messages in a custom location, we must hide the default messages and display the .ValidationMessage runtime properties of the invalid inputs in the custom location.

For mobile apps, follow the steps below to display input validation messages in a custom location:

  1. Add the following custom CSS to the screen to hide the default messages:

    span.validation-message {
       display: none;
    }
  2. Add an extra variable to the screen to hold the aggregated validation messages, and display it in an expression widget that can be placed in a custom location in the screen. For example, add the variable CustomValidationMessages.

  3. In the OnClick action associated with the button that submits the form, clear the previous value of the variable CustomValidationMessages and then assign the concatenation of the ValidationMessage runtime properties of the invalid inputs to the variable. The expression widget automatically displays the updated value of the variable.

  • Was this article helpful?