Submit validation failed

[kristian-puccio]

Is it possible to be notified when a form submit is made and didn't pass validation?

Maybe even just have the promise that handleSubmit returns call catch or resolve the promise with some errors.

I'd like to be able to do a couple of things with this, 1 is to track a hasSubmitted status about the form so I can show more intense errors if they have and 2 scroll to the first input with an error.

[kristian-puccio]

The other option would be to have handleSubmit always call a function and allow that function to manually call the relevant validation functions. That way the end user has totally control.

[erikras]

The current system provides enough control, I think. How about something like this?

<form onSubmit={handleSubmit(() =>
  mySubmitAction()
    .then(() => {
        // submission was successful
      }, errors => {
        // submission was unsuccessful
        // set showIntenseErrors and scroll to first invalid input
      }))}>
  // render inputs
</form>

[kristian-puccio]

yep perfect

On 12 November 2015 at 04:48, Erik Rasmussen notifications@github.com
wrote:

The current system provides enough control, I think. How about something
like this?

mySubmitAction() .then(() => { // submission was successful }, () => { // submission was unsuccessful // set showIntenseErrors and scroll to first invalid input }))}> // render inputs

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

[kristian-puccio]

Sorry I'm a little confused. On validation failure (I'm using async) the
function passed into handleSubmit never gets called so I don't get a chance
to return a promise.

Am I missing something? Should the .then tack on to handleSubmit ?

On 12 November 2015 at 09:23, Erik Rasmussen notifications@github.com
wrote:

Closed #256 #256.

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

[kristian-puccio]

Here is my code:

                <form
                    autoComplete={false}
                    onSubmit={
                        handleSubmit( () => {
                            console.log('NEVER CALLED');
                        })
                    }>

[erikras]

You're using the asyncValidate option of redux-form? If that fails, your submit will not be called.

Read through this.

[kristian-puccio]

Yep got that. I'm also using asyncBlurFields so I can't tell in my
validation function if it is a blur or submit that has triggered the
validation.

So I was wondering how do you feel about an onSubmitFailed prop(erty)? or
even maybe a second function as a parameter to handleSubmit?
That way you get an easy way of being notified when someone fails to submit
the form.

If your into the idea I'll try to send you a pull request.

On 13 November 2015 at 04:50, Erik Rasmussen notifications@github.com
wrote:

You're using the asyncValidate option of redux-form? If that fails, your
submit will not be called.

Read through this
http://erikras.github.io/redux-form/#/examples/asynchronous-blur-validation
.

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

[erikras]

handleSubmit returns the promise, though. Seems like you could do something similar to above:

<form onSubmit={event =>
  handleSubmit(mySubmitAction)(event) // <---- this is the promise returned from handleSubmit()
    .then(() => {
        // submission was successful
      }, errors => {
        // submission was unsuccessful
      }))}>
  // render inputs
</form>

You will always get to one of those two code branches if the user clicks submit.

[kristian-puccio]

Unfortunately I'm not seeing that.

handleSubmit(mySubmitAction) returns a promise, where the catch
function is never called but the success always is. Not the page will
refresh here.

handleSubmit(mySubmitAction)(event) throws an handleSubmit(...) is not
a function error.

If I change it to handleSubmit(event) I always get the success
function in the then called the same as handleSubmit(mySubmitAction)
but the page doesn't refresh.

On 17 November 2015 at 04:14, Erik Rasmussen notifications@github.com
wrote:

handleSubmit returns the promise, though. Seems like you could do
something similar to above:

handleSubmit(mySubmitAction)(event) // <---- this is the promise returned from handleSubmit() .then(() => { // submission was successful }, errors => { // submission was unsuccessful }))}> // render inputs

You will always get to one of those two code branches if the user clicks
submit.

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

[erikras]

Will your use case be fixed by #276?

[kristian-puccio]

No it's a different use case.
I would like to trigger an action of submitFailed with this.
So if the failed promise function that handleSubmit returns was called with
errors that would be perfect.

Am I missing something that the catch function isn't called? Are you seeing
it?

On 17 November 2015 at 08:37, Erik Rasmussen notifications@github.com
wrote:

Will your use case be fixed by #276
#276?

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

[erikras]

Aha! This is a legit bug.

[erikras]

There used to be an undocumented boolean flag you could pass to get this behavior, but I could find no reference to why that was not the default behavior. Fixed in v3.0.9.

[kristian-puccio]

Awesome the catch func is now being called, thanks so much for your
responsiveness!

One small thing the catch is being called with no params, it's fine as I
can grab the errors off the props but not sure if it's what your expecting.

On 17 November 2015 at 09:32, Erik Rasmussen notifications@github.com
wrote:

There used to be an undocumented boolean flag you could pass to get this
behavior, but I could find no reference to why that was not the default
behavior. Fixed in v3.0.9.

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

[erikras]

I would expect that it would be rejected with whatever the onSubmit function's returned promise was rejected with. It is in the tests.

[erikras]

@kristian-puccio #291 reminded me why the behavior was as it was. You will need to use the returnRejectedSubmitPromise config prop to get the rejected promise that I had given you in v3.0.9.

[kristian-puccio]

Great thanks @erikras.

[erikras]

You guys might be interested in v5.1.0.

[anhldbk]

@erikras for redux-form v6.x.x, how to properly handle rejections? I've created a related issue: mhssmnn/redux-form-saga#19

Certainly I can use your code above to fix that:

<form onSubmit={event =>
  handleSubmit(mySubmitAction)(event) // <---- this is the promise returned from handleSubmit()
    .then(() => {
        // submission was successful
      }, errors => {
        // submission was unsuccessful
      }))}>
  // render inputs
</form>

[Abhijeetjaiswalit]

@kristian-puccio @erikras I'm using the asyncValidate option of redux-form? If that fails, error is shown but when it passes the validation, after that I'm unable to submit my form. Can you tell me what could be the reason behind that? Here is my aysnc validate method:

import * as api from './tools/apiConfig';
import axios from 'axios';

function asyncValidate(values) {
const data = {
ktp: values.KTP.replace(/ /g, '')
}
if (!values.KTP) {
return Promise.resolve({})
}
return new Promise((values, reject) => {
return axios.post(api.VERIFY_KTP, data).then((response) => {
if (response.data == false) {
reject({ KTP: message })
}
else {
Promise.resolve({})
}
})
})
}
export default asyncValidate;

[lock]

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.