redux-form: Form still get submitted even if having syncErrors

I use redux-form/immutable version v6.0.0-rc.3

However, after i implement it, the form still able to submit even there is a syncError object underneath the form store.

When submit the form, everything goes well, the error of each inptu are shown but it won’t stop the submit process.

I track down the library and it look like it didn’t have this.submitPromise

I have no idea how to debug more, if you want any other information, please let me know.

in CustomerForm.js

class CustomerForm extends React.Component { // eslint-disable-line react/prefer-stateless-function
  render() {
    const { handleSubmit, submitting } = this.props;
    console.log(handleSubmit);
    return (
      <form className={styles.customerForm} onSubmit={handleSubmit}>
        <div>
          <label>Full Name: </label>
          <Field component={renderField} type="text" name="fullName" />
        </div>
        <div>
          <label>Phone Number: </label>
          <Field component={renderField} type="text" name="phoneNumber" />
        </div>
        <button type="submit" disabled={submitting}>Submit</button>
      </form>
    );
  }
}

CustomerForm.propTypes = {
  onSubmit: React.PropTypes.any,
  handleSubmit: React.PropTypes.any,
  submitting: React.PropTypes.any,
  customerDetail: React.PropTypes.object,
};

CustomerForm = reduxForm({
  form: 'customerDetail',
  validate,
})(CustomerForm);

and in its parent

const showResults = values =>
  new Promise(resolve => {
    setTimeout(() => {  // simulate server latency
      window.alert(`You submitted:\n\n${JSON.stringify(values, null, 2)}`)
      resolve()
    }, 500)
  })


export class Register extends React.Component { // eslint-disable-line react/prefer-stateless-function
  render() {
    return (
      <div className={styles.register}>
        <h1>Register</h1>
        <CustomerForm
          onSubmit={showResults}
          customerDetail={this.props.customerDetail}
        />
      </div>
    );
  }
}

About this issue

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

Most upvoted comments

I’m seeing this behavior in 6.1.0. I’m not using immutable.

My <Field>s are in a separate file from my form, wrapped in a small component, and also use the example renderField function. My onSubmit handler is in the same file as the form, outside of the component that renders the form (but was also tried as a class property).

If I touch the field validation happens properly. If I just hit submit without having edited the field submission happens. A log statement in the validate method never fires, so validation isn’t being called on submission.

My validation function returns an empty object {} if there are no validation errors. The validation function is called on initial page render (I’m rendering into a DOM element) and has the appropriate error message. The only issue appears to be that validate isn’t called on the onSubmit handler.

If I pull back everything into the component that renders the form the behavior is the same, e.g., it wasn’t because I went overboard refactoring. I see no meaningful difference between my code and the syncValidation example. This behavior occurs from 6.0.1-6.1.0.

davelnewton on Oct 17, 2016

I’m not using redux-form/immutable.

kyeotic on Aug 18, 2016

@vam Has this been resolved? I currently use import { Field, reduxForm } from 'redux-form/immutable' And form still gets submitted even with error shown 😕

Amurmurmur on Apr 4, 2017

I can confirm this behavior on 6.1.1. It happens when a form has only a non field error (i.e. _error was set) while all fields are valid.

I beleive that a part of the problem is the following line of of the CHANGE event handler in the reducer:

result = deleteInWithCleanUp(result, 'syncError');

The syncError property will be deleted every time a CHANGE action is dispatched. Or: the action UPDATE_SYNC_ERRORS, which could set the syncError again, is not triggered as needed.

ghost on Oct 26, 2016

Actually, it’s important to note that I am seeing the onSubmit function is only called with a FieldArray has errors, like this one

An error on a normal field does stop onSubmit from being called, but nested _error props will not stop onSubmit. The FieldArray example shows that this is indeed the correct response.

kyeotic on Aug 11, 2016