After first submit with error values, the form can't be submitted again about react-hook-form HOT 17 CLOSED

@bluebill1049 I got your point. I just wanted to say that I have some cases where I would like to be able to submit a form even if there's uncleared validation error.

I don't know if this is legit, but here is my work-around 😅

<form
  onSubmit={e => {
    clearErrors()
    handleSubmit(onSubmit)(e)
  }}
>

from react-hook-form.

For anyone else that find themselves with this problem, I was experiencing the same thing and after spending far too much time trying to figure out what was wrong, I realized that onSubmit was calling the error callback (not the main callback). The errors are preventing it from firing again (which is a bit of a gotcha if you are doing just server-side validation).

if you are setting errors manually while not assigned to any input, you as the user will need to manually clear that error.

https://react-hook-form.com/api#errors

An error that is not associated with an input field will be persisted until cleared with clearError.

This is by design, so we have consistent rules against error with input or server side.

from react-hook-form.

For anyone else that find themselves with this problem, I was experiencing the same thing and after spending far too much time trying to figure out what was wrong, I realized that onSubmit was calling the error callback (not the main callback). The errors are preventing it from firing again (which is a bit of a gotcha if you are doing just server-side validation).

from react-hook-form.

Sure, great work with react-hook-form btw!

from react-hook-form.

oh cool! no worries at all. happy coding :) feedback welcome

from react-hook-form.

This is my code:

...
function SignUpForm() {
    const { register, handleSubmit, errors } = useForm();

    const onSubmit = data => { dispatch(SignUpUser(data.email, data.password)) };


    return (
        <>
            <h3>Create an account</h3>
            <form onSubmit={handleSubmit(onSubmit)}>
                <input type="email" name="email" ref={register({ required: true })} />
                <input type="password" name="password" ref={register({ required: true })} />
                <input type="submit" value="register" />
            </form>
             {(errors.email || errors.password) && <p>All of the fields are required</p>}
            <Link href="/signin"><a>Already have an account? Sign in</a></Link>
        </>
    )
}
...

from react-hook-form.

It seems like that after I submit the form with (e.g.:) blank password field, it gets evualuated correctly - it have not passed the validation rules (required field). However, if I fill in the field and try to submit, the validation still marks the field as empty, that causes that the form can not be submitted with valid field values.

any idea why?

from react-hook-form.

that's strange... thanks for the detailed issue report. i will do a test with your code

from react-hook-form.

weird seems works for me https://codesandbox.io/s/blissful-fog-76c4g

from react-hook-form.

Thanks for the reply @bluebill1049 , but I still can't get it to work.
Do you have any ideas what I might be doing wrong? The issue still persists for me.
I can even find in the current ref that the value is okay, the only issue is that for some reason, react-hook-form still thinks that there are issues with the field and I cant get it to submit.

from react-hook-form.

which version are you running? I am more than happy to help out here :)

Did you try the link that I have posted above?

that error object doesn't look like a react-hook-form error as well

from react-hook-form.

Sure, I tried to setup next.js demo on code sandbox with the exact same code and it works.
https://9zyyq.sse.codesandbox.io
So the problem must be on my side.. I am running react hook form 3.9.0

from react-hook-form.

Can confirm that version update of react-hook-form to latest fixed this for me. Thanks for your help @bluebill1049 !

from react-hook-form.

you happy to close this issue? 👍

from react-hook-form.

This is by design, so we have consistent rules against error with input or server side.

But something may change on server-side (e.g. from another user's action) which would make the server accept the submit next time. Form validation is not necessarily idempotent.

from react-hook-form.

But something may change on server-side (e.g. from another user's action) which would make the server accept the submit next time. Form validation is not necessarily idempotent.

@vcarel not sure if my answer is detailed enough, basically if you set an error outside of inputs been registered, you will need to clear that input yourself, because there will be no inputs to revalidate that error.

<input {...register('test', { required: true })} />

setError('test', ...) // this error can be revaldiated against the input

handleSubmit() // gets invoked we can check if the input has value and remove that error

setError('test1', ...) 
// this is what I referred to as manual error, there is no clear way or a way for 
// react hook form to revalidate that error unless the user clears itself.

handleSubmit() // we couldn't validate that `test1`

hope that the above make more sense 🙏

from react-hook-form.

that's valid use case :) @vcarel 👍

from react-hook-form.