Nested Forms Validation Handling

App Building
1

I'm using a Form (Form B) within another Form (Form A).

Form B is used to capture the entry of new line items for a purchase into a table used to summarize information relevant to Form A.

Form B has validation requirements for entering a new line.

Form A should ignore Form B validation requirements when it's submitting since the fields in Form B aren't part of Form A data. It's odd that the validation of Form B is interfering since the State of Forma A data doesn't include these fields. How can I get around this?

  1. Is there a way to skip the validation of Form B during submission of Form A through the component settings/JS script?

  2. I could carve out Form B and the Table from Form A so it's sitting outside the Form A component, but Form B fields and settings are directly influenced by other fields in Form A, and Form A calculates totals based on the Table being updated by Form B. Since they are interrelated like this I would prefer to keep nested if possible.

Thank you.

2

Maybe have two separate submit buttons, one for A and one for B? Are you using a single submit to process both forms?

3

Two different buttons. Button A submits Form A, Button B submits Form B. On submit of Form A (button A), it doesn't submit because a field in Form B is noted as requiring input.

4

I think this is a dependency issues (Form A depends on Form B being valid). I'd suggest having them as separate forms.

5

For now I've managed to get around the issue by running a JS script that disables the required fields in Form B on submission of Form A. Disabling the fields seems to nullify their validation requirement.