next-multistep-form's Issues
Form Error Handling
Hi, wonderful implementation for the multi step form, however is there a way of removing the error state for each field when updating them to a valid state and also to display an error message if the field is an error after being updated?
It appears that as the buttons are outside the scope of the form the error handling is not as elegant as it would be if the whole form was on the page.
Putting the button inside the form cause all the elements to be validated and therefore future steps show errors as they haven't been filled
My thought would be that to achieve this an individual form would be required for each step?
Calling react-hook-form trigger method manually disables automatic re-validation on onChange
Hi. I was following your tutorial, and I faced the following issue.
This is a simplified version of the actual multistep form I was building following the YouTube tutorial.
I have the following code:
import { z } from 'zod'
import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { Button, Container, FormControl, FormHelperText, Stack, TextField } from '@mui/material'
const demoSchema = z.object({
fieldA: z.string().min(2),
})
type DemoFields = z.infer<typeof demoSchema>
function App() {
const {
watch,
trigger,
register,
formState: { errors },
} = useForm<DemoFields>({ resolver: zodResolver(demoSchema) })
const submitHandler = (data: DemoFields) => console.log(data)
const alt = async () => {
const isOk = await trigger('fieldA')
console.log(isOk)
if (isOk) submitHandler(watch())
}
return (
<Container>
<Stack>
<FormControl error={!!errors.fieldA}>
<TextField label="Username" {...register('fieldA')} />
<FormHelperText>{errors.fieldA?.message}</FormHelperText>
</FormControl>
<Button onClick={alt} variant="contained">
Submit!
</Button>
<pre>{watch('fieldA')}</pre>
</Stack>
</Container>
)
}
export default App
If I write "h" in the input field, and then I click on the "Submit!" button, of course I see a validation error, and the error message gets print on the screen:
This is good. however, the normal behavior of react-hook-form now is I have to click on the "Submit!" button again to get rid of the red error message.
-
Is using
trigger()
makes everything from now on manual? is that documented anywhere? -
I want the normal react-hook-form behavior to happen, so that when I write inside the input field, the error goes away as I type correctly.
Here's a preview in stack bilitz (if you're using brave browser, turn off the shields).
Question asked on StackOverflow here as well
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.