Redux form - how to set fields as touched

redux react-redux redux-form
Jan Omacka picture Jan Omacka · Sep 1, 2016 · Viewed 16.7k times · Source

I'm working with form that consists of multiple pages and I want to solve validation.

When I hit Submit button all fields on the present page shows error messages beneath, but if I change the page then I need to hit submit again because these fields weren't set as touched.

My problem would be solved if I could for example set all fields on the page as touched, once the form has flag anyTouched: true.

I'm using redux-form: '^6.0.0-rc.4' and I have one container where I include redux-form and multiple components consisting of fields.

Answer

davnicwil picture davnicwil · Aug 15, 2017

I think your problem was the opposite way around, but in case anyone lands here as I did looking for a way to have anyTouched set after any field in the form is touched...

In redux-form 6 and above you have to explicitly choose the behaviour you want with the form-level configurations touchOnChange and touchOnBlur - see the docs here - by default nothing is configured and so nothing happens.

const Form = reduxForm({
  form: 'my-form',
  touchOnChange: true,
  touchOnBlur: true
})(...)

These flags make it so that any given field is marked as touched (and therefore anyTouched is marked true on the form) when that field's onChange or onBlur handler is called, respectively.

Related questions

Redux-Form initial values from

I'm trying to fill the profile form with data from API. Unfortunately redux-form doesn't want to cooperate with me in this case. For some reason fields stays empty whatever I do. Setting the fixed values instead of values passed from …

Read More
You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports

import React from 'react'; import ReactDOM from 'react-dom'; import { createStore } from 'redux'; import createHistory from 'history/createBrowserHistory'; import { Provider } from 'react-redux'; import ConnectedRouter from 'react-router-redux'; import { Route, Switch } from 'react-router'; import Home from "./pages/Home"; import Register from "./pages/Register"; …

Read More
redux-form: How to disable submit button if at least one Field is not valid?

I'm rendering the below simple form using redux-form and it's working nicely. Now, I'd like to have the submit button disabled in one more situation: If any of the Field's has an error (i.e. it's meta.error is set). …

Read More