Hello everyone, i have a quick question regarding the implementation of changing the border of a input box to red if there is a error based on logic in the save action.
I have logic that runs based on an onclick action to save the data in the page, the logic works fine and as intended, but i need the frontend to reflect this beyond just a simple message popup telling the user what they must change. However, online i haven't seen any way to change the colours of the input fields to red if this logic is triggered without having to put in custom CS. Since the theme is used on a application wide level i want to avoid making direct CSS changes to it, does anyone have any ideas on how to do this with best practice in mind?
client side logic to check for errors, works fine.
frontend input fields that must be amended if logic triggered.
Hi @Morgan Kemp ,
Every input field in OutSystems has 2 properties, valid & validation message, if you set the valid property to false it will set the red border around the input field.
please check the below url for reference:
https://success.outsystems.com/documentation/11/developing_an_application/design_ui/forms/validate_the_fields_of_a_form/
hope this helps.
Regards,
Manish Jawla
Hi Manish, thanks for the fast response, i cant seem to see the "Built-in Validations" option within the input field, its a free text input field, would this have anything to do with it?
The Built-in Validations property is part of the widget that is used to submit the form (e.g. a button), not the input field. For more info, see the section "Enable or disable the built-in validation" of the link that @Manish Jawla shared.
Understood, i see this now. So how would i go about incorporating my validation check? Since i already have an If statement for it.
If you want to incorporate your own custom validation checks, you can use the Valid field of your input widget. So if you have an input widget named MyInput, you can set the value of MyInput.Valid to true or false, based on your If statement. When it's set to false, the red border will appear around the input field.
Hi @Morgan Kemp , to use validations you need to do something similar to this:First, an If with your validation, for example, then just search for your input's Id and set it to False so that the border appears red, and define in the ValidationMessage the message you want to appear to the user.