Greetings, I have studied the information in the documentation Form container | Documentation . I tried to do a similar thing, but I probably have a more complex structure to send.
I have the following: There is a tab element on one page. Each tab has a separate form for submission with fields (fields have a check for Required Fill). Each form is assigned a unique html attribute.
There is also a separate external submit button (which saves data to Supabase from fields in these submit forms). In this button, I have configured the Attributes as specified in the documentation. The button is of type “Submit”.
But when I click on the button, validation is not performed… Or rather it is performed (for a moment in one of the form fields you can see that there is a hint that you must enter data when I intentionally leave the field empty), but the workflow goes through completely, but does not stop. And (supposedly) it should stop with an error, because one of the conditions - “empty field must be filled” - is not fulfilled.
Besides, in the Workflow settings, the message that this button should be placed inside the submission form is shown on this button.
I can assume that the workflow needs to be added specifically to the submit form instead of the button, but then I would have to create duplicate workflows for each form? I may have many such individual forms (they will be placed on different tabs), and the workflow is complex… I’m afraid that duplicating the same workflow will break functionality and give a heavy execution load.
The workflow performs either adding a new record to Supabase or updating the current record with data fields preserved. And the fields are just “scattered” in different submission forms (and are in different tabs).
I had an idea to create a “common” form container for all fields in all tabs and place the entire Tabs element with all fields in it. That is, if I previously thought about creating separate forms for each tab with the fields located there, and calling them (doing conditional rendering) for each separate form. Now it is just a form that will be rendered immediately when the page loads and will serve as a container for all elements (not just input fields) inside it. In addition, I will create a work process “after submission” that will send the values of all input fields inside the container form (i.e., in all tabs).
Please advise on how effective and secure this will be. Is this solution viable? Is there another option?
I have a fairly complex form component that i made that allows multiple pages like your tabs, with any amount of form input elements on each page, some as children dependent on values in the parent to be shown. To build the form I structure a json in xano that will then populate the weweb divs in a cascade from page - parent - child questions.
As far as validation and submission – you can run some validations onChange to keep it very up to date, but there are debounce issues running code for each character typed. I use onBlur usually to do a check and update colors/hints/etc. Also for storage i have a variable that contains key value pairs for each input so [{id:1,response:“”}…] – I update the variable on blur and it keeps track of all the elements in all pages.Then decide how often to do your writebacks and to handle further validation on front end or backend. This approach also allows me to pull the response json when the user loads the form instance to repopulate and continue where they left off. Not all pages need to be rendered all the time, as you change tabs or pages it can repopulate the elements from the responses variable
@Matto thanks for your detailed reply. Unfortunately, I’m not good at this kind of coding methods… Probably lack of experience, I thought there was something simpler to solve my question. But anyway thanks for your reply, I will look into it more, maybe I can understand something with my inexperienced brain and apply it to my application ).
I placed the main elements (input fields) inside the form container, everything works, even validation (e.g. no “save” is performed if required fields are not filled).
However, as I noted above, I have a Tabs component (it is of course placed inside the form container). The input fields are accordingly placed in different tabs. When submitting a form, if the field is in an inactive tab (i.e. the input field is visually hidden), validation is not triggered (e.g. if the input field must be filled in) and the workflow of saving (adding/modifying) the record is successful. However, I need the validation to run in all tabs when the workflow starts (when submitting a form) (so that the workflow does not run if the validation fails). How can this be configured? Are there any inbuilt ways, or do I need to do some specific functionality so that at the moment of sending all tabs are checked, not just the active one ?
