redux-form only show validation errors on submit

Question

Is there a way to configure redux-form so that validation errors only show when the form is submitted?

Also I would like to clear an individual form field error when a user starts typing or makes a change.

Is this possible with redux-form?

Answer 1

You're responsible for rendering any validation errors, so you can configure them only to be visible after submission has failed (i.e. the user pressed submit and your validations came back as failing). For this, your input components wrapped with Field are passed a meta object as a prop that contains a submitFailed field that tells whether form submission has failed. The actual code for rendering that component could look something like this:

render() {
  const { meta: { error, submitFailed } } = this.props
  return (
    // ... rendering the input and then some
    { error && submitFailed ? (
      <span className="validation-error">{ error }</span>
    ) : null }
    // ... rendering the rest
  )
}

For not showing errors while the user is typing, you're responsible for enabling that behavior and the props passed to your wrapped input component hold the keys, this time the meta object holds a field called active, which tells you whether this input has focus or not. Code could be something like this (building on the previous example):

render() {
  const { meta: { active, error, submitFailed } } = this.props
  return (
    // ... rendering the input and then some
    { !active && (error && submitFailed) ? (
      <span className="validation-error">{ error }</span>
    ) : null }
    // ... rendering the rest
  )
}

Hope this helps!