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

[andrzey]

I also experience this issue. I'm on version 7.52.1. When I trigger manual validation on a field, I get an error. However, when I start typing inside the input, the input validation does not get triggered.

[jitugosavi]

Yes, I am facing same issue. I need to show form errors in edit mode. I tried calling trigger in onMount using useEffect. I can see errors when page is loaded, however, error messages does not go away even after valid values are entered in the input.

[ID-JA]

Here's an implementation utilizing the trigger function
https://codesandbox.io/s/multi-step-react-hook-form-sjry9s

[saadi-ninjasCode]

This is not correct way. You just changed the mode to onChange. It will trigger validation on each key stroke.

[saadi-ninjasCode]

Did any one found solution?

[samislam]

😢

[saadi-ninjasCode]

Issue

When using
await trigger();

• Errors are displayed, but the affected fields are not invalidated immediately.
• Typing in the input fields does not automatically clear the errors or revalidate the fields.

Solution

To address this, the following steps are implemented:

• After calling trigger(), manually check the error state of the specific field.
• If the field has an error, revalidate it using trigger(fieldName).

Code Implementation
Here's an example of how you can handle the issue:

const onChangeAction = (...args) => {
  // Perform the default onChange action
  onChange(...args);

  // Check if the specific field has an error
  if (getFieldState(fieldName).error) {
    // Revalidate the specific field
    trigger(fieldName);
  }
};

Explanation

• onChange is called to handle input changes as usual.
• getFieldState(fieldName).error is used to check if the field still has an error.
• If an error exists, trigger(fieldName) is called to revalidate the specific field immediately.

Note: getFieldState is available in the return value of useForm() and introduced in version (v7.25.0) of react-hook-form

[schardev]

Same issue here. I'm on 7.54.2. I use trigger to ... well ... trigger the validation before actually submitting the form via onSubmit, here's what I'm trying to do (example is a bit contrived):

const handleConfirm = async () => {
  const isValid = await trigger();
  setOpenConfirmationDialog(isValid);
};

const onSubmit = handleSubmit((data) => {
  mutation.mutate(data);
});

return (
  <form onSubmit={handleConfirm}>
    ...
    {openConfirmationDialog && <ConfirmationDialog onSubmit={onSubmit} />
  </form>
)