Reactive web app: field validation messages do not show immediately

Just experimenting with reactive web apps I built a very basic form, within in popup ... some input fields and two buttons, Back and Change. Clicking the Change button activates a client action for some basic validations. When a validation fails, I set the corresponding input_field.Valid to false and specify the input_field.ValidationMessage ("Field incorrect"). I check the Formname.Valid and when false an error message is set ("Form incorrect") and the client action ended.

So far so good ... the validations work fine and the error message "Form incorrect" is displayed on the screen.

However, the ValidationMessage "Field incorrect" is not displayed.

More precize, ValidationMessages aren't displayed immediately. First I have to click on the input field in error, change its value and then the message "Field incorrect" appears.

As a newbee to Reactive Web Apps ... do I forget something? Do I have to refresh the form somehow to display the ValidationMessages at the same time as the error message?


Hi Charles,

I just created a small test, having a simple Form with a Button that calls the following Screen Action:

As you can see, I set the Valid to False and the ValidationMessage to some text. When I click the button (and the Screen Action is executed), this is what the Input looks like:

So the Input has a red border, the validation message is shown and the Form1.Valid is automatically set to False, as the "Form invalid!" message is shown.

So I'm not sure what goes wrong in your case, as everything seems to work as expected.

Hi Kilian,

Perhaps the problem is related to the popup?
As you can see in the attacehd image, my main form is working ok, just like your test (emailaddress in error and immediately shown with a red border and message, hidden underneath the popup).

Clicking 'Change password' enables shown popup and that's where my problem occurs. In this example I mistyped the current password, click the Change-button and only the error message is shown.



After I click within the Current password field and make any change, than the red border and validation message occur.

I think it has something to do with a different way OutSystems seems to handle validation messages on a popup. As I mentioned in my previous post, on the main screen / form everything's ok. But in my second form in the popup, messages a shown AFTER I re-activate the error field and make a change in it. 

So, before ending the action that handles the form, I changed the values of the local variables binded to the input fields ... et voila, the validation messages appear immediately.

In my case, with hidden password fields, no problem. But this is not the way you want to handel a form with normal, visible input fields. 

Might this be an error in OutSystems itself?

Hi Charles,


I agree it is a bug in the handling of validation errors in forms on popups.


A workaround I have found, it's not pretty but helps until bug is fixed, is to trigger the redrawing of the field. 

One of the ways to do this is to give each input widget an extra attribute...


... and every time form is not valid, change the value of this attribute.


See attached oml.

I have only tested this on inputs, not other types of widgets, you'd have to check if it works for everything.

Again, this is not nice coding, but if you need forms on popups, it can be a solution.

If you feel so inclined, you could file a bug report with OS.

Good luck,

Dorine

Thanks for your workaround Dorine ... I'll have a look at it.
Glad I'm not the only one experiencing this problem ... I already started to doubt myself :-)
Kind regards, Charles


I had the same issue.

Look at this post (https://www.outsystems.com/forums/discussion/59495/mobile-app-validation-message-not-showing/) for other way of solving it. Put the form in a block, and the validation message shows up.

Saludos,

Wilko