hamedbahram / next-multistep-form Goto Github PK

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?

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