Comments (6)
The input would need to fire an onBlur event for the revalidate.
from react-hook-form.
But how? It feels very wrong to need to intercept onClick
on the submit button, blur, refocus and then submit… if that's even a possible solution to the problem
from react-hook-form.
maybe try to do a trigger on the submit button click?
from react-hook-form.
That doesn't seem to work either. The onClick doesn't seem to fire when there are errors:
const handleClick = () => {
console.log(Math.radom());
trigger();
handleSubmit(onSubmit)();
};
return (
<div className="App">
<form onSubmit={handleSubmit(onSubmit)}>
{errors?.firstName ? <p>Enter a valid name</p> : null}
<div>
<label htmlFor="firstName">First Name</label>
<input
{...register("firstName", {
required: true,
})}
/>
</div>
<input type="submit" onClick={handleClick} />
</form>
</div>
);
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?
from react-hook-form.
yea that's what i have in mind, why it's not firing tho. it should as the onClick even there.
from react-hook-form.
Hi @bluebill1049,
If I understood correctly, you want the form to be submitted onBlur
if form is valid. This is not expected behavior of reValidationMode. However you can achieve this by using below code snippet.
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);
from react-hook-form.
Related Issues (20)
- issue: Form-level `disabled` doesn't affect uncontrolled inputs that aren't rendered immediately HOT 1
- issue: Fields dirty state is not updated when passing values to useForm since 7.51.0 HOT 8
- Validate all Form Fields in Parallel on Submit when criteriaMode is set to 'all' HOT 2
- Submit the form outside the form (imperative submission) HOT 2
- issue: Async defaultValues function overwrites values in React.StrictMode
- issue: Default values set by resetting are discarded when register has not been called yet.
- issue: useFieldArray doesn't retain provided values when appending
- issue: `setValue` with object array makes lost of reference
- Allow JSX to be returned as an error message HOT 5
- Trigger of the field in which the rules have changed HOT 2
- issue: React hook form doesn't seem to support input on one field causing errors on another field e.g yup validation with when clauses HOT 1
- issue: useFieldArray fields state not refreshing HOT 3
- issue: handleSubmit doesn't respect Zod schema transformations in TypeScript HOT 4
- issue: Field array did note render item when it's empty string HOT 1
- issue:
- issue: getValidateError loses messages if an array is returned HOT 2
- feature request: attaching custom data to server errors HOT 2
- issue: `field.ref` recreated on each render HOT 2
- issue: validation error on submit using a required field and useFieldArray HOT 2
- issue: Default Values are returning as undefined when using <Controller /> component HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-hook-form.