onSubmit being called before validation #156

duro · 2015-10-21T00:13:57Z

Here is a simple form component I have setup.

Here is the main page container:

import React, {Component} from 'react';
import LoginForm from './LoginForm';

export default class Login extends Component {

  handleSubmit() {
    console.log('submit');
  }

  render() {
    return (
      <div>
        <h1>Login</h1>
        <LoginForm onSubmit={this.handleSubmit.bind(this)} />
      </div>
    );
  }
}

And here is the LoginForm.js container/component:

import React, {Component, PropTypes} from 'react';
import {connectReduxForm} from 'redux-form';

function validateLogin(data, props) {
  const errors = {};
  if(!data.email || data.email.length > 0) {
    errors.name = 'Required';
  }
  return errors;
}

@connectReduxForm({
  form: 'login',
  fields: ['email', 'password'],
  validate: validateLogin
})
export default class LoginForm extends Component {

  static propTypes = {
    fields: PropTypes.object.isRequired,
    handleSubmit: PropTypes.func.isRequired,
    onSubmit: PropTypes.func.isRequired
  }

  render() {

    const { fields: {email, password}, handleSubmit } = this.props;

    return (
      <form>
        <div>
          <label>Email Address</label>
          <input type='text' {...email} />
          {name.error && name.touched && <div>{name.error}</div>}
        </div>

        <div>
          <label>Password</label>
          <input type='password' {...password} />
          {password.error && password.touched && <div>{password.error}</div>}
        </div>

        <div><button onClick={handleSubmit(this.props.onSubmit)}>Submit</button></div>
      </form>
    );
  }
}

The problem I am running into is that the handleSubmit in the parent container is getting called before the validateLogin function is called and validations have either happened successfuly, or not.

My expection is that the validator function would get called, and if there were no errors, then the handleSubmit that I passed in from the onSubmit prop would get called.

Am I doing something wrong, have the wrong expectation, or is this a bug?

The text was updated successfully, but these errors were encountered:

wmertens · 2015-10-21T05:28:11Z

First of all, questions should go on stackoverflow, reactiflux etc. (at
least that's the case with most projects and I think this one too)

Secondly, don't pass onSubmit to handleSubmit, it already takes care of
that. I think that's why it's behaving this way…

On Wed, Oct 21, 2015, 2:13 AM Adam Duro notifications@github.com wrote:

Here is a simple form component I have setup.

Here is the main page container:

import React, {Component} from 'react';
import LoginForm from './LoginForm';

export default class Login extends Component {

handleSubmit() {
console.log('submit');
}

render() {
return (

Login

);
}
}

And here is the LoginForm.js container/component:

import React, {Component, PropTypes} from 'react';
import {connectReduxForm} from 'redux-form';

function validateLogin(data, props) {
const errors = {};
if(!data.email || data.email.length > 0) {
errors.name = 'Required';
}
return errors;
}

@connectReduxForm({
form: 'login',
fields: ['email', 'password'],
validate: validateLogin
})
export default class LoginForm extends Component {

static propTypes = {
fields: PropTypes.object.isRequired,
handleSubmit: PropTypes.func.isRequired,
onSubmit: PropTypes.func.isRequired
}

render() {
const { fields: {email, password}, handleSubmit } = this.props;

return (
  <form>
    <div>
      <label>Email Address</label>
      <input type='text' {...email} />
      {name.error && name.touched && <div>{name.error}</div>}
    </div>

    <div>
      <label>Password</label>
      <input type='password' {...password} />
      {password.error && password.touched && <div>{password.error}</div>}
    </div>

    <div><button onClick={handleSubmit(this.props.onSubmit)}>Submit</button></div>
  </form>
);
}
}

The problem I am running into is that the handleSubmit in the parent
container is getting called before the validateLogin function is called
and validations have either happened successfuly, or not.

My expection is that the validator function would get called, and if there
were no errors, then the handleSubmit that I passed in from the onSubmit
prop would get called.

Am I doing something wrong, have the wrong expectation, or is this a bug?

—
Reply to this email directly or view it on GitHub
#156.

Wout.
(typed on mobile, excuse terseness)

duro · 2015-10-21T05:31:22Z

I already tried not passing onSubmit explicitly. Same issue.

So far this is appearing bug like, hence submitting an issue.

On Tuesday, October 20, 2015, Wout Mertens notifications@github.com wrote:

First of all, questions should go on stackoverflow, reactiflux etc. (at
least that's the case with most projects and I think this one too)

Secondly, don't pass onSubmit to handleSubmit, it already takes care of
that. I think that's why it's behaving this way…

On Wed, Oct 21, 2015, 2:13 AM Adam Duro <notifications@github.com
javascript:_e(%7B%7D,'cvml','notifications@github.com');> wrote:

Here is a simple form component I have setup.

Here is the main page container:

import React, {Component} from 'react';
import LoginForm from './LoginForm';

export default class Login extends Component {

handleSubmit() {
console.log('submit');
}

render() {
return (

Login

);
}
}

And here is the LoginForm.js container/component:

import React, {Component, PropTypes} from 'react';
import {connectReduxForm} from 'redux-form';

function validateLogin(data, props) {
const errors = {};
if(!data.email || data.email.length > 0) {
errors.name = 'Required';
}
return errors;
}

@connectReduxForm({
form: 'login',
fields: ['email', 'password'],
validate: validateLogin
})
export default class LoginForm extends Component {

static propTypes = {
fields: PropTypes.object.isRequired,
handleSubmit: PropTypes.func.isRequired,
onSubmit: PropTypes.func.isRequired
}

render() {

const { fields: {email, password}, handleSubmit } = this.props;

return (

Email Address {name.error && name.touched &&
{name.error}
}

Password {password.error && password.touched &&
{password.error}
}

Submit

);
}
}

The problem I am running into is that the handleSubmit in the parent
container is getting called before the validateLogin function is called
and validations have either happened successfuly, or not.

My expection is that the validator function would get called, and if
there
were no errors, then the handleSubmit that I passed in from the onSubmit
prop would get called.

Am I doing something wrong, have the wrong expectation, or is this a bug?

—
Reply to this email directly or view it on GitHub
#156.

Wout.
(typed on mobile, excuse terseness)

—
Reply to this email directly or view it on GitHub
#156 (comment).

wmertens · 2015-10-21T05:53:01Z

Then you should have said so from the start, saving all of us time :-)

Are you sure the validate is not running, I don't see a console log?

On Wed, Oct 21, 2015, 7:31 AM Adam Duro notifications@github.com wrote:

I already tried not passing onSubmit explicitly. Same issue.

So far this is appearing bug like, hence submitting an issue.

On Tuesday, October 20, 2015, Wout Mertens notifications@github.com
wrote:

First of all, questions should go on stackoverflow, reactiflux etc. (at
least that's the case with most projects and I think this one too)

Secondly, don't pass onSubmit to handleSubmit, it already takes care of
that. I think that's why it's behaving this way…

On Wed, Oct 21, 2015, 2:13 AM Adam Duro <notifications@github.com
javascript:_e(%7B%7D,'cvml','notifications@github.com');> wrote:

Here is a simple form component I have setup.

Here is the main page container:

import React, {Component} from 'react';
import LoginForm from './LoginForm';

export default class Login extends Component {

handleSubmit() {
console.log('submit');
}

render() {
return (

Login

);
}
}

And here is the LoginForm.js container/component:

import React, {Component, PropTypes} from 'react';
import {connectReduxForm} from 'redux-form';

function validateLogin(data, props) {
const errors = {};
if(!data.email || data.email.length > 0) {
errors.name = 'Required';
}
return errors;
}

@connectReduxForm({
form: 'login',
fields: ['email', 'password'],
validate: validateLogin
})
export default class LoginForm extends Component {

static propTypes = {
fields: PropTypes.object.isRequired,
handleSubmit: PropTypes.func.isRequired,
onSubmit: PropTypes.func.isRequired
}

render() {

const { fields: {email, password}, handleSubmit } = this.props;

return (

Email Address {name.error && name.touched &&
{name.error}
}

Password {password.error && password.touched &&
{password.error}
}

Submit

);
}
}

The problem I am running into is that the handleSubmit in the parent
container is getting called before the validateLogin function is called
and validations have either happened successfuly, or not.

My expection is that the validator function would get called, and if
there
were no errors, then the handleSubmit that I passed in from the
onSubmit
prop would get called.

Am I doing something wrong, have the wrong expectation, or is this a
bug?

—
Reply to this email directly or view it on GitHub
#156.

Wout.
(typed on mobile, excuse terseness)

—
Reply to this email directly or view it on GitHub
<#156 (comment)
.

—
Reply to this email directly or view it on GitHub
#156 (comment).

Wout.
(typed on mobile, excuse terseness)

duro · 2015-10-21T05:54:50Z

I have been using the debugger with breakpoints. The validate breakpoint is
hit after the onSubmit handler console log.

On Tuesday, October 20, 2015, Wout Mertens notifications@github.com wrote:

Then you should have said so from the start, saving all of us time :-)

Are you sure the validate is not running, I don't see a console log?

On Wed, Oct 21, 2015, 7:31 AM Adam Duro <notifications@github.com
javascript:_e(%7B%7D,'cvml','notifications@github.com');> wrote:

I already tried not passing onSubmit explicitly. Same issue.

So far this is appearing bug like, hence submitting an issue.

On Tuesday, October 20, 2015, Wout Mertens <notifications@github.com
javascript:_e(%7B%7D,'cvml','notifications@github.com');>
wrote:

First of all, questions should go on stackoverflow, reactiflux etc. (at
least that's the case with most projects and I think this one too)

Secondly, don't pass onSubmit to handleSubmit, it already takes care of
that. I think that's why it's behaving this way…

On Wed, Oct 21, 2015, 2:13 AM Adam Duro <notifications@github.com
javascript:_e(%7B%7D,'cvml','notifications@github.com');
<javascript:_e(%7B%7D,'cvml','notifications@github.com
javascript:_e(%7B%7D,'cvml','notifications@github.com');');>> wrote:

Here is a simple form component I have setup.

Here is the main page container:

import React, {Component} from 'react';
import LoginForm from './LoginForm';

export default class Login extends Component {

handleSubmit() {
console.log('submit');
}

render() {
return (

Login

);
}
}

And here is the LoginForm.js container/component:

import React, {Component, PropTypes} from 'react';
import {connectReduxForm} from 'redux-form';

function validateLogin(data, props) {
const errors = {};
if(!data.email || data.email.length > 0) {
errors.name = 'Required';
}
return errors;
}

@connectReduxForm({
form: 'login',
fields: ['email', 'password'],
validate: validateLogin
})
export default class LoginForm extends Component {

static propTypes = {
fields: PropTypes.object.isRequired,
handleSubmit: PropTypes.func.isRequired,
onSubmit: PropTypes.func.isRequired
}

render() {

const { fields: {email, password}, handleSubmit } = this.props;

return (

Email Address {name.error && name.touched &&
{name.error}
}

Password {password.error && password.touched &&
{password.error}
}

Submit

);
}
}

The problem I am running into is that the handleSubmit in the parent
container is getting called before the validateLogin function is
called
and validations have either happened successfuly, or not.

My expection is that the validator function would get called, and if
there
were no errors, then the handleSubmit that I passed in from the
onSubmit
prop would get called.

Am I doing something wrong, have the wrong expectation, or is this a
bug?

—
Reply to this email directly or view it on GitHub
#156.

Wout.
(typed on mobile, excuse terseness)

—
Reply to this email directly or view it on GitHub
<
#156 (comment)
.

—
Reply to this email directly or view it on GitHub
<#156 (comment)
.

Wout.
(typed on mobile, excuse terseness)

—
Reply to this email directly or view it on GitHub
#156 (comment).

wmertens · 2015-10-21T06:09:11Z

Indeed the submit gets called before a final validate.
https://github.com/erikras/redux-form/blob/master/src/createReduxForm.js#L238

However the validate should have been called on change already?

@erikras not sure what the rationale is here…

On Wed, Oct 21, 2015, 7:54 AM Adam Duro notifications@github.com wrote:

I have been using the debugger with breakpoints. The validate breakpoint is
hit after the onSubmit handler console log.

On Tuesday, October 20, 2015, Wout Mertens notifications@github.com
wrote:

Then you should have said so from the start, saving all of us time :-)

Are you sure the validate is not running, I don't see a console log?

On Wed, Oct 21, 2015, 7:31 AM Adam Duro <notifications@github.com
javascript:_e(%7B%7D,'cvml','notifications@github.com');> wrote:

I already tried not passing onSubmit explicitly. Same issue.

So far this is appearing bug like, hence submitting an issue.

On Tuesday, October 20, 2015, Wout Mertens <notifications@github.com
javascript:_e(%7B%7D,'cvml','notifications@github.com');>
wrote:

First of all, questions should go on stackoverflow, reactiflux etc.
(at
least that's the case with most projects and I think this one too)

Secondly, don't pass onSubmit to handleSubmit, it already takes care
of
that. I think that's why it's behaving this way…

On Wed, Oct 21, 2015, 2:13 AM Adam Duro <notifications@github.com
javascript:_e(%7B%7D,'cvml','notifications@github.com');
<javascript:_e(%7B%7D,'cvml','notifications@github.com
javascript:_e(%7B%7D,'cvml','notifications@github.com');');>> wrote:

Here is a simple form component I have setup.

Here is the main page container:

import React, {Component} from 'react';
import LoginForm from './LoginForm';

export default class Login extends Component {

handleSubmit() {
console.log('submit');
}

render() {
return (

Login

);
}
}

And here is the LoginForm.js container/component:

import React, {Component, PropTypes} from 'react';
import {connectReduxForm} from 'redux-form';

function validateLogin(data, props) {
const errors = {};
if(!data.email || data.email.length > 0) {
errors.name = 'Required';
}
return errors;
}

@connectReduxForm({
form: 'login',
fields: ['email', 'password'],
validate: validateLogin
})
export default class LoginForm extends Component {

static propTypes = {
fields: PropTypes.object.isRequired,
handleSubmit: PropTypes.func.isRequired,
onSubmit: PropTypes.func.isRequired
}

render() {

const { fields: {email, password}, handleSubmit } = this.props;

return (

Email Address {name.error && name.touched &&
{name.error}
}

Password {password.error && password.touched &&
{password.error}
}

Submit

);
}
}

The problem I am running into is that the handleSubmit in the
parent
container is getting called before the validateLogin function is
called
and validations have either happened successfuly, or not.

My expection is that the validator function would get called, and
if
there
were no errors, then the handleSubmit that I passed in from the
onSubmit
prop would get called.

Am I doing something wrong, have the wrong expectation, or is this
a
bug?

—
Reply to this email directly or view it on GitHub
#156.

Wout.
(typed on mobile, excuse terseness)

—
Reply to this email directly or view it on GitHub
<
#156 (comment)
.

—
Reply to this email directly or view it on GitHub
<
#156 (comment)
.

Wout.
(typed on mobile, excuse terseness)

—
Reply to this email directly or view it on GitHub
<#156 (comment)
.

—
Reply to this email directly or view it on GitHub
#156 (comment).

Wout.
(typed on mobile, excuse terseness)

erikras · 2015-10-21T13:56:04Z

Sync validation is called on every render. Or at least it should be.

wmertens · 2015-10-21T15:37:47Z

apart from that, why does the validate get called after submitting in
handleSubmit? Why not before or why at all?

On Wed, Oct 21, 2015 at 3:56 PM Erik Rasmussen notifications@github.com
wrote:

Sync validation is called on every render. Or at least it should be.

—
Reply to this email directly or view it on GitHub
#156 (comment).

Wout.
(typed on mobile, excuse terseness)

duro · 2015-10-21T16:28:29Z

@erikras I can understand validation running on every render, but what I don't understand is why the submit handler is being called before validation.

It should work like this:

Submit Click -> Validation Fail -> Render
or
Submit Click -> Validation Success -> Submit Handler -> Render

Right now it is working like:

Submit Click -> Submit Handler -> Validation Success/Fail -> Render

Doesn't make sense since the submit handler should only run if the form is valid.

duro · 2015-10-21T22:53:29Z

This was primarily user error. My validation rules were always telling redux-form that the form was valid.

erikras · 2015-10-21T23:02:56Z

😆 Okay, no problem. My change won't break anything.

tylercollier · 2016-05-17T22:12:39Z

In my case, onSubmit appeared to be called immediately in a test method. After scratching my head for a while, I noticed the number of tests being run was not the number I expected, and realized that other test files were being run, and it was another test, working as expected, which was submitting the form. The reason I was so confused is that I was using mocha's .only functionality to limit just the tests in my current describe block. It turns out this is a known bug/behavior.

The field-level validation it doesn't work. The onSubmit handler is called before the validation which seems wrong. There was already an issue on the repo about it: redux-form/redux-form#156 but with no specific solution. This reuses the required validation function to validate all fields of the form, which does happend before onSubmit is called.

lock · 2018-06-03T00:32:29Z

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

erikras closed this as completed in 1ad1a71 Oct 21, 2015

willmcclellan mentioned this issue Oct 22, 2015

Submit handler / hasErrors validation bug #159

Closed

lock bot locked as resolved and limited conversation to collaborators Jun 3, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

onSubmit being called before validation #156

onSubmit being called before validation #156

duro commented Oct 21, 2015

wmertens commented Oct 21, 2015

Login

duro commented Oct 21, 2015

Login

wmertens commented Oct 21, 2015

Login

duro commented Oct 21, 2015

Login

wmertens commented Oct 21, 2015

Login

erikras commented Oct 21, 2015

wmertens commented Oct 21, 2015

duro commented Oct 21, 2015

duro commented Oct 21, 2015

erikras commented Oct 21, 2015

tylercollier commented May 17, 2016

lock bot commented Jun 3, 2018

onSubmit being called before validation #156

onSubmit being called before validation #156

Comments

duro commented Oct 21, 2015

wmertens commented Oct 21, 2015

Login

duro commented Oct 21, 2015

Login

wmertens commented Oct 21, 2015

Login

duro commented Oct 21, 2015

Login

wmertens commented Oct 21, 2015

Login

erikras commented Oct 21, 2015

wmertens commented Oct 21, 2015

duro commented Oct 21, 2015

duro commented Oct 21, 2015

erikras commented Oct 21, 2015

tylercollier commented May 17, 2016

lock bot commented Jun 3, 2018