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 ?

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

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.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 12, 2016 at 10:31

Mayday

5,2165 gold badges27 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

mfrachet Over a year ago

Oh, it's only at a field level ? What if I need to make it happen at the form level ?

Mayday Over a year ago

I think so, If you need to do that, you might want to save refs to those fields and create callable functions from parent. Or you can store it in redux and use selectors. Depends on your needs

Erik R. Over a year ago

You can create a form-level error at the _error key. i.e. errors._error = 'Something wrong with whole form';

Collectives™ on Stack Overflow

Redux form with react and validators

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related