I have a page which gives the user the ability to create tabs where each tab has some form input. The form input can be textbox, dropdown or textarea, depending on the stage type the user selects. I store all this information in an array of objects with an object for each tab the user creates.
Now I want to validate the form elements in each tab before the user submits and display an error message if any. How can I do this in React? Can it be done in redux forms?
The easiest is in your submit call iterate over the array and validate each object, if pass continue if fail display validation and exit submit action before sending data. Example:
let dataArray = [{id1: {valid: true}}, {id2: {valid: false}}, {id3: {valid: true}}, {id4: {valid: false}}, {id5: {valid: true}}]
let validations = {}
dataArray.map((v,i) => { if(!Object.keys(v)[0].valid) validations[Object.keys(v)[0]] = true }
adjust above to your use case In your Redux state you'd have a validation slice which would be replaced by the validations object above. In the component you'd have something like
{ this.props.validations && this.props.validations[identifier] ? <Error /> : null }
Marko Stijak
Try CxJS. It might become your best friend.
I know that this is not the answer you're looking for, however, this is a very interesting question to me, since I'm the author of a front-end framework called Cx. My answer shows how you could do this in Cx: http://cx.codaxy.com/fiddle/?f=KnVzI2RW