Hey guys. Sounds like a super common question right. However, there is something unique in my situation. The form fields are completely dynamic (think JSON structure with various form fields with various attributes etc. being fed into the app on start and then creating a bunch of divs with dynamic, varying form fields. There are an arbitrary amount of pages with these form fields that the user has to continue through.

I am using Redux. My question is what is the cleanest way to trigger, for example, all field validations on the current page when the user clicks the "continue" button to get to the next page of forms?

For example, if there are 5 fields rendered onto the page, 3 of which are required, if the user clicks continue without touching any of the fields, what would be the cleanest workflow to highlight the 3 required fields in red and show the error text under the fields?

I will add some thoughts I have because I don't want it to seek like I have stumbled over this process for awhile now.

1. On page load, store an array or arrays in redux designated to maintaining the errors for each of the fields. Each nested array is a page, each page can have multiple objects holding the field identifier as a key and the value as another array if errors. On app load, build the whole array structure in redux. On continue button click, iterate through the fields on the page that are required, place those errors in the corresponding arrays. I'm lost now, see why I don't like this.

2. Pass a handler down to the continue button on click that sets a boolean in a higher component that passes that boolean down to all the field components. On field component render, if the boolean is true, trigger a validation on the field. No redux use here..

Any advice is greatly appreciated. I'm coming from Vue, where I would use Vuelidate to get stuff done. Plus this use case is very unique, since it is such a unique form compilation situation. Thank you very much in advance for tips.