Good morning,
I would need your help to apply some styles in a form validation message.
I have a form in which to advance, I need to accept some rules of use. I have added a checkbox (attached screenshot) with a text. Inside a Client Action I validate that if the variable assigned in the checkbox is false, the message is launched this way in an Assign:
NameCheckbox.ValidationMessage = “The rules of use must be accepted”.
So far so good. The problem is that when I do the previous Assign, the message is shown out of place and it is not put under the text:
I don't want to modify any of the logic and what I did was to create a new style theme just for this message (CheckboxTheme). Through the browser, I saw that the id associated with the message is “AcceptCheck_DescribedBy” and I added this id in the previous style theme, with its respective CSS:
The widget tree looks like this:
But still the changes are not applied to me and it still looks bad. I don't know how to solve it because I can't relate it to the message.
Thank you very much!
Hi Amin,
I’ve attached an .oml file with a potential solution for your problem.
On the screen, I created a local variable called ShowWarningMessage and assigned it to the Visible property of the container that holds your second validation message.
In the logic for the Proceed button, I’ve added validations to check whether the user has selected the checkbox.
I hope this helps!
If I understand correctly, you want the message “The rules of use must be accepted” to appear directly below the “I accept the rules of use” text, with both messages aligned next to the checkbox, right?
If that's the case, I suggest using two separate containers, one for each text, inside the TextChecksNormesUs. Each container would take up the full available space. I don't think you'll need to apply a CSS class for this.
Also, where are you applying the class you created in the Checkboxes theme on your screen?
Hi Beatriz,
Thank you for your response. Yes, exactly. I want it to be displayed below the text, but only when the forward button is clicked and, if the checkbox is not selected (I want it to be mandatory), the message is displayed. That's why I put it in the logic with an “AcceptRulesUse.Valid”.
The problem is that checkboxes cannot be made mandatory. The class I created in the CheckboxsTheme is actually the ID that belongs to the message and I got it from inspecting the element in the browser
To ensure the checkbox is checked before proceeding, you can verify if the value of the attribute bound to the checkbox is true. Alternatively, you can set the Enable property of the button to Checkbox.Value = True, so the button will only be enabled when the checkbox is checked. You should also recheck this value in your forward logic.
Regarding the CSS, OutSystems recommends avoiding the use of IDs when applying styling classes.
Since you've already created your CSS class, simply add its name to the Style Classes property of your container.
In my case, the button will always be enabled regardless of whether the checkbox is checked or not. What you said about making sure the checkbox is checked before proceeding and being able to check if the value of the attribute linked to the checkbox is true, how could I do that?
Regarding the ID, agreed. What I would like is to access the message class (validation-message) to change the styles. But I can't do this because it is a class common to the whole application and it is also used elsewhere.
In the browser looks like this:
Could you share the .oml file with me so I can help you more effectively?
When I mentioned making sure the checkbox is checked before proceeding, I was referring to your button logic. Before performing any actions (like creating a record), check if the value of the attribute bound to the checkbox is true. If it's not, you can show your validation message.
For the styling, where it says class="validation-message", try editing the HTML and adding your custom CSS class, "AcceptCheck_DescribedBy", to see if that applies the correct styles.
What you did was create a CSS class, but you're referring to the span's ID. To target the ID, the css should be:
#AcceptCheck_DescribedBy { your css properties }
Thank you for taking the time! I'm sorry, but I have ODC Studio and I can't open the file. Could you pass it to me in ODC Studio? It would help me to clarify my doubts with your file.
Sorry but I don't have access to ODC at the moment. Could you download OutSystems 11 to check the file?
I have already downloaded it and your solution is very good. I will try it. Thank you very much for your help and your time!
Best regards!