Revalidate onChange after Trigger call

[jonathanzhang99]

Hi! Thank you guys for all the work you've put into this library – I've been very impressed with all the features so far! Right now it seems that if mode is not set to onChange, manually triggering a validation will not allow revalidation since no submit event has been triggered. My flow involves a button that will first validate the form before rendering a modal that double checks if a user actually wants to submit. However, if a user fails the initial validation, the fields will no longer be revalidated on any input changes. Is there any way to trigger revalidation onChange after a trigger call?

[bluebill1049]

can you explain that in a codesandbox?

[jonathanzhang99]

Hi! Really apologize for the late reply! Here is a fork of the trigger example code but removing some extraneous components: https://codesandbox.io/s/react-hook-form-v6-triggervalidation-b77uy?file=/src/index.js:0-61

After clicking the Validate All button, any fields with missing input will continue to show an error state even after typing values in them. Is it possible for validation to run onChange after a programmatic trigger call?

[bluebill1049]

you can attach onChange and trigger individual inputs.

[sandy1018]

you can attach onChange and trigger individual inputs.

I'm facing the same issue here. Can you explain more on how to do this? I'm new to react hook form.

[sandy1018]

I did something like this within input onChange function and it works for me
if (errors) {
trigger(name);
}

[ronilitman]

@bluebill1049 I think it makes sense that trigger will receive another argument that treats the validation as a "submit" so the validation will change from onSubmit to onChange, WDYT?

[ArianHamdi]

Yeah, I think it makes sense. Since most of the inputs are handled in an uncontrolled manner, adding an onChange event to them isn't a good idea. Do you think we can create a feature request for having an option to change mode in trigger or not? @bluebill1049

[ikany]

You can submit your form with handleSubmit() instead of using trigger(). That way the revalidation will work and all you have to do is to block the first submit so you don't submit prematurely.

[LeulAria]

in step form you can't use that...

[ducdotoffs]

Hi,
In my case, I got better idea that set mode in useForm is 'all'. For me it better than attach onChange and trigger individual inputs. Because i have many fields need trigger.
Example:
const { register, handleSubmit, control, watch, trigger, formState: { errors } } = useForm({ resolver: zodResolver(schema), mode: 'all'})

for more infor: check the doc https://www.react-hook-form.com/api/useform/#mode

[codinginflow]

Instead of trigger, you can call handleSubmit, which should revalidate on field change:

form.handleSubmit(() => {})()

What do you think?

[siamahnaf]

handleSubmit should not work here. But I think it can be solved easily with useState-

const [mode, setMode] = useState<"onSubmit" | "onBlur" | "onChange" | "onTouched" | "all" | undefined>("onSubmit");

const {
        register,
        control,
        handleSubmit,
        getValues,
        formState: { errors },
        watch,
        setValue,
        trigger,
} = useForm<FormInput>({
     mode: mode
});

Now setMode to onChange when you are triggering like following-

const isValid = await trigger(undefined, { shouldFocus: true });
if (isValid) {
    // Do something here
    setMode("onSubmit") // Change validation mode to onSubmit(To Default one)
} else {
    setMode("onChange") // If not valid change the mode to onChange
}