Form validation for hidden fields.

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

Hi,

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,

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

 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.

 Thanks

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 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

 

 Hi Sanjay,

I am sorry it's not in my personal environment. Please see below for action flow.

Hi,

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.

Cheers

Hi Nannu,

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

Solution

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.


Solution

Dorine Boudry wrote:

Hi Nannu,

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

 Hi Dorine,

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.


 

Dorine Boudry wrote:

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.


 

 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

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.


Dorine


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 ?

Dorine Boudry wrote:

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.


 Thank you so much for your help.