Redux Form Validation firing on load (UPDATE_SYNC_ERRORS)

user_986235 0
Viewed 5177

All required fields have their validation triggered by UPDATE_SYNC_ERRORS on load of the form component. I don't think this is a bug I believe it to be a code issue (as it used to work - although I have recently updated)

So my question is - What could cause UPDATE_SYNC_ERRORS to fire at this stage? The field also has no value (undefined) yet passes through my function and fires an error as 'Required' like when a field has been touched.

export const required = value => value ? undefined : 'Required';

I can put an extra check in eg: value && value !== undefined ? undefined : 'Required'; but then I don't get the error when the textField has been touched.

Any ideas how to debug without totally stripping back? Cheers!

redux-form reactjs
1 Answers

In the last day I ran into this problem, too, and struggled to find any suitable solution, but through an amalgamation of lots of different issues on redux-form repo and lots of re-reading the docs and peeking at the source I've got something that should address your question. Granted, almost a year later, but hopefully it helps someone.

Note: The "magic" as it were is denoted by a comment so if your config object for reduxForm looks different I wouldn't pay much mind.

import { reduxForm, getFormValues, isDirty } from 'redux-form';

const formName = 'brilliantForm';

let MyForm = reduxForm({
    form: formName,
    enableReinitialize: true,
    asyncValidate,
    asyncBlurFields: [],
})(ComponentToWrap);

MyForm = connect(
    state => ({
        formValues: getFormValues(formName)(state),
        initialValues: {
            fieldOne: '',
            fieldTwo: '',
        },
        shouldValidate: () => isDirty(formName)(state), // This is the magic
    })
)(MyForm);

export default MyForm;

The gist here is that if there are initial values for your form redux-form is going to validate them by default unless you tell it not to via shouldValidate(). The isDirty selector makes quick work of limiting validation to after the form has been touched/interacted with.

NOTE: As of 7.1 shouldValidate() has been split up and deprecated in favor of shouldError() and shouldWarn().

user_2504960
Related