title: redux-form v6: Form submission canceled because the form is not connected
body: <p>I am getting this error in my console.</p>
  
  <p>"Form submission canceled because the form is not connected"</p>
  
  <p>after trying to migrate my redux-form from v5 to v6 since we migrated our app to a more recent version of React.</p>
  
  <p>I am not sure what is going wrong here so i figured I could use a second or third pair of eyes.</p>
  
  <p>Here is my "Smart Component"</p>
  
  <pre><code>import React, { PropTypes } from 'react';
  import { reduxForm } from 'redux-form/immutable';
  import { connect } from 'react-redux';
  import { logUserIn } from '../../actions/authentication';
  import { VALID_EMAIL_REGEX } from '../../config/app_config';
  import LoginForm from './LoginForm';
  
  const FORM_ID = 'loginForm';
  
  export class LoginFormContainer extends React.Component {
  
    static propTypes = {
      handleSubmit: PropTypes.func.isRequired,
      submitting: PropTypes.bool.isRequired,
      loginAction: PropTypes.func.isRequired,
    };
  
    performLogin = (params) =&gt; {
      const { loginAction } = this.props;
      const credentials = {
        email: params.email,
        password: params.password,
      };
      loginAction(credentials, '/home');
    }
  
    render() {
      const { handleSubmit, submitting } = this.props;
      return (
        &lt;LoginForm
          handleSubmit={ handleSubmit }
          loginFunction={ this.performLogin }
          submitting={ submitting }
        /&gt;
      );
    }
  }
  
  const validate = values =&gt; {
    const errors = {};
    if (!values.email || values.email === '') {
      errors.email = 'Required';
    }
    else if (!VALID_EMAIL_REGEX.test(values.email)) {
      errors.email = 'Invalid email address';
    }
    if (!values.password || values.password === '') {
      errors.password = 'Required';
    }
    return errors;
  };
  
  LoginFormContainer = reduxForm({
    form: FORM_ID,
    validate,
  })(LoginFormContainer);
  
  export default connect(null, {
    loginAction: logUserIn,
  })(LoginFormContainer);
  </code></pre>
  
  <p>I am passing down my submission handler function as a prop to my actual form that contains the Field component for inputs. The loginAction will link to the action for redux to send the values to the backend and redirect to home.</p>
  
  <pre><code>import React, { PropTypes } from 'react';
  import { Field } from 'redux-form/immutable';
  import { getClassName, checkButtonDisabled } from '../../utils/forms';
  import { Link } from 'react-router';
  
  const renderInput = (field) =&gt; {
    return (
      &lt;div className={ getClassName(field.meta.touched, field.meta.error) }&gt;
        &lt;input
          {...field.input}
          className="form-control form-control-success"
          type={field.type}
        /&gt;
        {field.meta.touched &amp;&amp;
         field.meta.error &amp;&amp;
         &lt;span className="error"&gt;{field.meta.error}&lt;/span&gt;}
      &lt;/div&gt;
    );
  };
  
  export default class LoginForm extends React.Component {
  
    static propTypes = {
      handleSubmit: PropTypes.func.isRequired,
      loginFunction: PropTypes.func.isRequired,
      submitting: PropTypes.bool.isRequired,
    };
  
    render() {
      const {
        loginFunction,
        submitting } = this.props;
  
      return (
        &lt;form onSubmit={ loginFunction.bind(this) }&gt;
          &lt;fieldset&gt;
            &lt;div&gt;
              &lt;label className="form-control-label"&gt;
                Email address&amp;nbsp;
              &lt;/label&gt;
              &lt;Field
                name="email"
                component={renderInput}
                type="text"
                placeholder="example@exampledomain.com"
              /&gt;
            &lt;/div&gt;
  
            &lt;div&gt;
              &lt;label className="form-control-label"&gt;
                Password&amp;nbsp;
              &lt;/label&gt;
              &lt;Field
                name="password"
                component={renderInput}
                type="password"
                placeholder="your password"
              /&gt;
            &lt;/div&gt;
  
          &lt;/fieldset&gt;
          &lt;button
            type="submit"
            className="btn btn-primary"
            disabled={ checkButtonDisabled(submitting) }
          &gt;
            Log In
          &lt;/button&gt;&amp;nbsp;
          &lt;Link to="/forgot-password"&gt;Forgot Password?&lt;/Link&gt;
        &lt;/form&gt;
      );
    }
  }
  </code></pre>
  
  <p>I successfully was able to get the form to work but when I hit login I get the error above and I am redirected to home, but I am not authenticated and I get a 422 error as well. I couldn't tell if my form connecting is the only error or if my action is not getting the right information from the form submission function.</p>
  
  <p>Got any suggestions?</p>