I'm ignoring the code examples as they are not needed to answer the UX side of things here.
You have a multi-step form, like a wizard. I would suggest using that as a pattern as I'm assuming your users are not familiar with your form, given that they don't already know how to use it. If they are untrained a wizard is a good option (this is a great Medium article on Wizards and when to use them).
That being said you need to convey that once they have chosen options that the linked fields are required.
Your example fails because once I click on A and B, section A disappears. Your real solution might not be like this, however.
Option 1: A clearer grouping, like accordions.
- So if the Section A option was selected it would expand to show the required fields below. Animation showing where these fields are coming from would be helpful, so the sliding down animation helps with this.
- Each should clearly show they are required with helper text. Entering a field and leaving without entering data should make it red.
- Colouring each field red immediately is not ideal as this can make the user feel like they have failed before they have even started.
- Submitting without completing should let the user know which fields are missing and that they are required. Scrolling to that field is very helpful.
- By the same token making things green when they are filled and then the whole section header green or adding a tick can be helpful. Aim for clear but not loud visual communication. Otherwise, it can be overpowering and visually noisy.
- Definitely include instructional text that is brief but explains that they can select more than one option, but each selection has related required fields.
- It's generally a good rule to tell users things more than once. So the instructions are once, the helper text per field is twice, the validation colours three times. If you had coding hours to spare (haha!) you could have a decreasing counter as each field validates.
Option 2: Adding more pages in the sequence.
- First page shows the Checkboxes
- Then if the user chooses A and C those pages are added into the form flow. Or Section B is removed depending on how you look at it.
- Checkbox Page (Chooses A & C) > Section A questions page (All required) > Section C questions page (all required)
- The user cannot move forward without completing all the fields.
- Provide a back arrow so that the user could change their checkbox selection.
- Don't clear fields if the user goes backwards then forwards again (not easy dev wise but a really poor experience if a user must fill things out more than once).
- This sort of chunking is better for simpler form completion (even though it is longer. It can also prove to be more mobile friendly as well. There are possible dev/functionality benefits if you save on each Next button progression.
The reason I suggest this is accordions can be confusing and hide things if the related questions are long and people have to scroll a lot. This good article on Smashing Mag talks about it.
Regardless of the option you use - Test your solution.
- You have feedback on the first version
- test the improved section or chunked version to make sure it improves the experience.
- Make any follow up changes based on test data or suggestions.
- It's a good idea to test after small iterative changes.
- You might solve the problems with less work :)
- Have a success metric (e.g completion rate or conversion rate) to show the before and after effects of your UX changes with hard data.