Hi,
I am working on a lengthy form and I divided that form into categories. I am controlling visibilty of different categories from the side bar. I have the built in validation turned on. However, when I try to submit the form as a whole without displaying any category section, validation is not working. It only works if I am displaying a specific category and it it's required fields are not filled.
Hope this makes sense.
Thanks
see attached oml
it is possible to do, but I think having to hardcode in case of an invalid field, what parent container should be unhidden is very ugly, when you move an input in your design to another container, and forget this code in the onSave, it doesn't work properly anymore.
Dorine Boudry wrote:
Hi Dorine,
Thank you so much for sharing this OML, validation is working and it's not submitting the form without required fields. As I mentioned in the discussion above I am navigating to different sections from sidebar buttons. Is there any way to display some kind of indication on the button so that user can understand in which section they are missing required fields? If we can do that, it will solve my problem.
Thank you for your time
Thank you so much for your help.
Have you considered dividing your form by several forms? That is, you say that you do not show everything at once, you will show parts... if you place each of these parts inside a form, and in the end they validate all forms... The form.valid essentially validates if the mandatory fields are filled, and some types.
https://success.outsystems.com/Documentation/11/Developing_an_Application/Design_UI/Forms/Use_a_Form_to_Group_Input_Widgets
I hope that this helps you, and I understood your issue Nannu.
Cheers
Miguel Verdasca wrote:
Hi Miguel,
I tried moving one of the original form container into the new form, it didn't work. Also in my case I am calling the external api on submit button click to save the data.
Hi Nannu,
can you please post your OML or some snaps of action flow to get more idea about how you are doing validation and calling API?
Regards,
Sanjay
Sanjay Kumar Sahu wrote:
Hi Sanjay,
I am sorry it's not in my personal environment. Please see below for action flow.
Looking at the flow, I would say that everything is fine.
In other words, form.valid, must validate whether mandatory fields are filled or not. But it is not possible to have a more detailed context.
you are probably using the visible property of a container or such to control what sections are shown. When visible is false, the content simply isn't there, and so built-in validations can't happen.
You could use a conditional style property instead, then validations will also happen on hidden fields. But you then have a new problem, form validation relies on showing a red border and a validation message near the wrong input, but as the section is hidden, you will have to do something extra like maybe unhiding all sections that have a problem on them...
I'll make you a small demo,
just a minute
Dorine
PS: I'm using reactive, but I assume same story will hold for traditional
Yes you are absolutely right. I am using visible property of container. Not sure how to use conditional style property, I look forward to see you demo.
Thank you.
Yes, of course,
you could have a boolean for each section, whether it's valid or not, as a local variable. In the Save action, set this boolean dependend on which inputs are not valid.
And then make the display of these sidebar buttons depend on that boolean. for example with conditional class (i like that better than conditional style, it's cleaner)
something like
Attributes
class
If(Section1IsValid, "", "button-non-valid-section")
and then in your CSS define what that class should look like.
I also tried to do it as Miguel said, with a form for each section, but that doesn't seem to work. I suspect the built-in validations only fire on the form that the button is part of, but I'm not sure that's it. Can any of the more experienced developers confirm that ?