redux-form: Errors not passed into onSubmitFail

errors in the onSubmitFail is not being populated for me. Am I doing something wrong or is this a bug??

import React from 'react';
import { Field, reduxForm, SubmissionError } from 'redux-form';

const Password = (props) => {
  const { handleSubmit, submitting, error } = props;
  const submit = () => Promise.reject(new Error('test'));
  return (
    <form onSubmit={handleSubmit(submit)}>
      <div>
        <label htmlFor="password">Password</label>
        <Field name="password" component="input" type="password" placeholder="Password" />
      </div>
      <h1>{error}</h1>
      <div>
        <button type="submit" disabled={submitting}>Next</button>
      </div>
    </form>
  );
};

export default reduxForm({
  form: 'password',
  onSubmitFail: (e) => {
    console.log(e); // shows undefined
    throw new SubmissionError({ _error: e.message });
  },
})(Password);

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 15 (1 by maintainers)

Most upvoted comments

Because this issue saw almost no activity for a few months, I’m closing it.

+14

gustavohenke on Dec 6, 2017

const renderField = ({
  input,
  type,
  icon,
  placeholder,
  meta: { touched, error }
}) => (
  <div className="field">
    <div className="ui left icon input">
      <i className={[icon, "icon"].join(" ")} />
      <input {...input} placeholder={placeholder} type={type} />
    </div>
    {touched && error && <div className="ui negative message">
      <div className="header">
        {error}
      </div>
    </div>}
  </div>
)

function submit(values) {  
  if (!values.email) {
    throw new SubmissionError({
      password: 'Required',
      _error: 'Login failed!'
    });
  } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
    throw new SubmissionError({
      password: 'Invalid email',
      _error: 'Login failed!'
    });
  }

  if (!values.password) {
    throw new SubmissionError({
      password: 'Invalid password',
      _error: 'Login failed!'
    });
  }
}

let LoginForm = props => {
  const { handleSubmit, submitting, error } = props;

  return (
    <form className="ui form" onSubmit={handleSubmit(submit)}>
      <div className="ui stacked segment">

        <Field component="input" type="text" name="email" placeholder="E-mail address" icon="mail" component={renderField} />

        <Field component="input" type="password" name="password" placeholder="Password" icon="user" component={renderField} />

        {error && <strong>{error}</strong>}

        <button type="submit" className="ui fluid large teal submit button" disabled={submitting}>Login</button>
      </div>
    </form>
  );
}

LoginForm = reduxForm({
  // a unique name for the form
  form: 'login'
})(LoginForm);

export default LoginForm;

I had the same issue, error in props always give out undefined

vinhtq on Jan 4, 2018

Any updates on this issue?

kylanhurt on Feb 19, 2017

You can use the third parameter passed to onSubmitFail, it contains the original error. What I do is:

import {SubmissionError} from 'redux-form'

const onSubmitFail = (errors, dispatch, submitError) => {
  if (submitError instanceof SubmissionError) {
    // optionally do something
  } else {
    throw submitError // or handle it
  }
}

antoinerousseau on Mar 7, 2017