Calling react-hook-form trigger method manually disables automatic re-validation on onChange

[samislam]

The following code is just a demo for using trigger manually, I know
it's a simple example,. you could use handleSubmit() here, but this
is just an example.

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).

[chanthinh]

Hi @samislam,
useForm hook has 2 options: mode and reValidateMode
doc: https://react-hook-form.com/docs/useform#reValidateMode
As you describe, you need to use reValidateMode and handleSubmit
You can check my stack bilitz: https://stackblitz.com/edit/stackblitz-starters-siwzws?file=src%2FApp.tsx

[caudurodev]

Same issue here. This is not clear. useForm({ reValidateMode: 'onChange' }) does not make validation work again on input value changes. Your stack blitz also does not behave as desired. After typing 2 chars the errors should disappear without needing to subimt again.

[BenjaminIsMyName]

Can confirm - same issue here