Retrieve errors with redux-form validation

Question

This is my first question on stackOverflow :) I searched for a whilel but I don't manage to solve my issue... I am claiming for your help then ;)

Here is my component form :

import React from 'react';
import styles from './subscribe.css';
import { Field, reduxForm, propTypes } from 'redux-form';
import { validateSubscribeForm, renderBasicField, renderEmailField } from '../Shared/formUtils';

class SubscribeForm extends React.Component {

  render () {
    const { handleSubmit } = this.props;
    return (
      <div className={styles.container}>
        <div className={styles.form}>
          <form onSubmit={handleSubmit(validateSubscribeForm)}>
            <div>
              <Field name='firstname' type='text' label='Prénom' component={renderBasicField} />
            </div>
            <div>
              <Field name='lastname' type='text' label='Nom' component={renderBasicField} />
            </div>
            <div>
              <Field name='email' type='email' label='Email' component={renderEmailField} />
            </div>
            <div>
              <button className='btn btn-info' type='submit'>Submit</button>
            </div>
          </form>
        </div>
      </div>
    );
  }
}

SubscribeForm.propTypes = {
  fields: React.PropTypes.shape({
    email: React.PropTypes.string,
    firstname: React.PropTypes.string,
    lastname: React.PropTypes.string
  }),
  handleSubmit: propTypes.handleSubmit
};

export default reduxForm({
  form: 'subscribe',
  validateSubscribeForm
})(SubscribeForm);

And then the functions I use in that component :

import React from 'react';

export const renderBasicField = (field) => {
  console.log('field ', field);
  return (<div className='input-row form-group has-success has-feedback'>
    <input {...field.input} className='form-control' type='text' placeholder={field.label} />
    {field.meta.touched && field.meta.error &&
    <span className='error'>{field.meta.error}</span>}
  </div>);
};

export const renderEmailField = (field) => (
  <div className='input-row form-group has-success has-feedback'>
    <div className='input-group'>
      <span className='input-group-addon'>@</span>
      <input {...field.input} type='text' className='form-control' placeholder={field.label} id='inputGroupSuccess1' aria-describedby='inputGroupSuccess1Status' />
        {field.meta.touched && field.meta.error &&
        <span className='error'>{field.meta.error}</span>}
    </div>
  </div>
);

export const validateSubscribeForm = values => {
  const errors = {};
  console.log('values : ', values);
  if (!values.firstname) errors.firstname = 'Un nom est requis';
  if (!values.lastname) errors.lastname = 'Un nom est requis';
  if (!values.email) errors.email = 'Un email est requis';
  else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
    errors.email = 'Adresse email invalide';
  }
  console.log('Errors: ', errors);
  return errors;
};

And finally where I declare my reducers (app container component at the root of the app) :

const rootReducer = combineReducers({
  userConnection: connection,
  tennisSearch: reducer,
  subscribe: subscribeReducer,
  form: formReducer,
  routing: routerReducer
});

The issue I have is that I don't manage to get my field.error information populated in my renderField functions... I don't understand because the validate function is called which populates the errors array containing the issues. It seems that my form component is not refreshed on submit even if I have the feeling that I properly declared the reducer... I don't manage to get this work even if I spent a long time in the redux-form documentation...

Any idea of what is the issue ? I checked for examples on the web and I found ones but not with the Field component proposed by redux-form which I use... :)

Thanks a lot for your help!

ps: I am quite a newbie on javascript and coding so I might have done a beginner mistake... this can be helpful for your analysis ;)

Answer 1

The name of validation function should be 'validate', so you can't use es6 syntax, just change it to this:

export default reduxForm({
  form: 'subscribe',
  validate: validateSubscribeForm
})(SubscribeForm);