CODEWITHSUNDEEP
redux-form
dagda1
dagda1

Reputation: 28770

redux-form only show validation errors on submit

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?

Upvotes: 0

Views: 2529

Answers (2)

Skiminock
Skiminock

Reputation: 149

I'm also had this problem, the reason was using touchOnChange flag

reduxForm({
        form: 'MyForm',
        enableReinitialize: true,
        touchOnChange: true,
})

So I removed this flag from reduxForm options and the code started working correctly - I saw the validation errors on submit only

reduxForm({
        form: 'MyForm',
        enableReinitialize: true,
})

Example from official site https://redux-form.com/8.2.2/examples/fieldlevelvalidation/

Upvotes: 0

jakee
jakee

Reputation: 18556

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!

Upvotes: 2

Related Questions