How to re-trigger validations manually in ReduxForm?

Question

I like to re-trigger validations after the form has mounted. Let's assume I like to run the validations each time I click a button named 'validate inputs'.

How to do this?

Related questions:

• How to run validation on a slice of a redux-form FieldArray state
• Is there a way in Redux Forms to make a form validate from code?

Answer 1

Manual redux-form validation is an oft requested feature, that does not seem to be provided at the moment.

My personal workaround is to trigger this.props.change('_validationHack', Date.now()) in the reduxForm-wrapped component and then remove values._validationHack in the onSubmit method before sending the values to the server.

It's not pretty, but seems to work without exception.

Answer 2

The sync validation is run on every render, so "triggering it" doesn't really have much meaning.

If you would like to use async validation, there is a this.props.asyncValidate() function that you can call to trigger it.

OR, if you prefer submit validation, you could just submit the form.

Answer 3

According to 28/11/2018:

https://redux-form.com/6.2.1/docs/api/actioncreators.md/

There are actions that you can dispatch for making changes to your form and triggering the validation method.

If you trigger change/touch actions it should execute the validate function.

Answer 4

This worked for me:

import { touch, stopAsyncValidation } from 'redux-form';
//...
    yield put(stopAsyncValidation('CallForm', { mdn: mdn.error_message }));
    yield put(touch('CallForm', 'mdn'));

• clue from https://stackoverflow.com/a/51065315/588759
• clue about touch https://github.com/redux-form/redux-form/issues/3992#issuecomment-399411329
• working example https://github.com/zobroj/ab-web/blob/ea4fccb68b4f3a2f747f47d23624bc69631782ed/app/containers/RegisterPage/sagas.js#L62
  • found with https://github.com/search?l=JavaScript&q=%22yield+put%28touch%28%22&type=Code