-
-
Notifications
You must be signed in to change notification settings - Fork 2k
This issue was moved to a discussion.
You can continue the conversation there. Go to discussion →
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
issue: When using reValidateMode: 'onBlur', the form doesn't submit when its single error is fixed #11866
Comments
The input would need to fire an onBlur event for the revalidate. |
But how? It feels very wrong to need to intercept |
maybe try to do a trigger on the submit button click? |
That doesn't seem to work either. The onClick doesn't seem to fire when there are errors:
The random number gets logged on the first press which initially validates the form, but not on the 2nd. Was that what you had in mind? |
yea that's what i have in mind, why it's not firing tho. it should as the onClick even there. |
Hi @bluebill1049, If I understood correctly, you want the form to be submitted import React from "react";
import ReactDOM from "react-dom";
import { useForm } from "react-hook-form";
import "./index.css";
function App() {
const { register, handleSubmit, formState } = useForm({
mode: "onSubmit",
reValidateMode: "onBlur",
});
const [blurState, setBlurState] = React.useState({})
const onSubmit = (data) => {
alert(JSON.stringify(data));
};
const { onBlur, ...registerProps } = register('firstName', { required: true });
const handBlurEvent = (e) => {
onBlur(e)
setBlurState(prevState => ({
...prevState,
"firstName": true
}))
};
const isValidState = blurState["firstName"] && !formState.isValidating && !formState.errors["firstName"]
React.useEffect(() => {
if(isValidState) {
handleSubmit(onSubmit)()
setBlurState(prevState => ({
...prevState,
"firstName": false
}))
}
}, [
isValidState,
onSubmit,
handleSubmit
])
return (
<div className="App">
<form onSubmit={handleSubmit(onSubmit)}>
{formState.errors && formState.errors.firstName ? (
<p>Enter a valid name</p>
) : null}
<div>
<label htmlFor="firstName">First Name</label>
<input
{...registerProps}
onBlur={handBlurEvent}
/>
</div>
<input type="submit" />
</form>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement); |
This issue was moved to a discussion.
You can continue the conversation there. Go to discussion →
Version Number
7.51.4
Codesandbox/Expo snack
https://codesandbox.io/p/sandbox/react-hook-form-handlesubmit-v7-forked-wkshgg?file=%2Fsrc%2Findex.jsx
Steps to reproduce
When using
reValidateMode: 'onBlur'
and your form has 1 error, if your blur event is also clicking the button to submit the form, then the errors are removed, but the submit never happens.Screencast of below steps:
react-hook-form.mp4
Steps to reproduce:
Expected behaviour
When the form has no errors, it should submit successfully when clicking the submit button
What browsers are you seeing the problem on?
Firefox, Chrome, Safari, Edge
Relevant log output
No response
Code of Conduct
The text was updated successfully, but these errors were encountered: