Ad

Submitting Redux-form Form Like A Normal HTML Form If Validation Passes, Touching All Fields If Not

- 1 answer

I'm trying to build a form that will submit like any other HTML form if redux-form validation passes. If validation fails, I want it to touch all the fields and prevent submission.

So I need to either: write my own onSubmit function that will touch the fields if validation fails. Which I'm trying:

This implementation:

handleSubmit (event) {
  const {touch, fields} = this.props
  if (!allValid(fields)) {
    event.preventDefault()
    touch(...fields)
  }
}

Yields this error: TypeError: Cannot read property 'indexOf' of undefined out of the call to touch. I'm having a lot of trouble tracking down where exactly this error is occurring in the implementation of touch, but it's definitely the call to touch that's causing it.

Using the built-in handleSubmit will get the touching behavior right if validation fails, but I can't figure out how to get it to submit the form like a normal HTML form if validation passes as well without doing something hacky like this:

handleSubmit (event) {
  const {touch, fields} = this.props
  if (!allValid(fields)) {
    event.preventDefault()
    this.props.handleSubmit(() => {})()
  }
}

Which does work, but seems like a bad way to go about it.

Ad

Answer

I believe touch is expecting an array of strings not an array of objects. So you're probably wanting touch(...Object.keys(fields)).

Ad
source: stackoverflow.com
Ad