Redux form with react and validators

Question

I m using redux form for the first time and I m having some troubles dealing with synchronous validators.

Actually, I m having the following component :

import React, {Component, PropTypes} from 'react';
import {Field} from 'redux-form';
/**
 * The SignupForm class definition
 */
export default class SignupForm extends Component {
    /**
     * The SignupForm props type
     */
    static propTypes = {
        handleSubmit: PropTypes.func,
    }

    /**
     * Render the SignupForm
     */
    render() {
        console.log(this.props); // nothing available concerning the error
        const {
            handleSubmit
        } = this.props;
        return (
            <form onSubmit={handleSubmit}>
                <Field name="email" component="input" required placeholder="Email" type="text"/>
                <Field name="emailConfirmation" component="input" required placeholder="Confirm your email" type="text"/>
                <Field name="password" component="input" required placeholder="Password" type="password"/>
                <Field name="passwordConfirmation" component="input" required placeholder="Confirm your password" type="password"/>
                <button type="submit" className="signup">Signup</button>
            </form>
        );
    }
}

And the following validator :

export default ({email, emailConfirmation}) => {
    const errors = {
        email: null
    };

    if (email !== emailConfirmation) {
        errors.email = 'The two email addresses are not the same';
    }
    console.log(errors); // the error is here
    return errors;
};

And map both the redux form and the validator using the reduxForm function :

import SignupForm from './../../components/signupForm/signupForm';
import validate from './signupForm.validators';
import {reduxForm} from 'redux-form';
export default reduxForm({
    form: 'signup',
    validate
})(SignupForm);

My problem

When I console.log inside of my validator the errors object on the return statement, I m well having my error telling that my email addresses are not the same.

But when I console.log this.props in my component, I can see an object with some redux-form properties and methods, but the error object is undefined.

I m probably making the things wrong, but I can't get how and why.

Any help ?

Answer 1

When your validate function its called, you are creating an object "errors" and returning it, so redux-form will use that to inject to corresponding fields the errors.

in your case: your Field "email" should get in props: meta: {error: 'The two email addresses are not the same'}

Are you sure this is not happenning?

Did you check official docs sample?

According to Field docs I understand you can only get to it at Field level

meta.error : String [optional]

The error for this field if its value is not passing validation. Both synchronous, asynchronous, and submit validation errors will be reported here.