Show errors on "onBlur", but immediately detect when form is valid?

[pgsandstrom]

So I want my errors to show on "onBlur". But I want my "submit"-button to be enabled directly when the form is valid. Is there a neat way to achieve this?

For example, calling the ´trigger` function on each key press does enable my submit-button correctly, but it also shows errors prematurely.

[bluebill1049]

can you share a CSB?

[pgsandstrom]

Here is a csb: https://codesandbox.io/s/react-hook-form-apply-validation-forked-cl1bt?file=/src/index.js

I would like the submit-button to be enabled directly when I input something as "firstName". But since my mode is "onBlur", it doesn't show until i blur the input. So the problem is that I want different timings for showing errors and enabling the submit button.

[elibroftw]

What did you end up doing?

[pgsandstrom]

Dont remember, sorry. It was too long ago :P

[elibroftw]

This is what I did. Before the first blur, no errors. Upon blur, errors shown. If the form is valid, form.formState.isValid is true. After the first blur, errors will update as user types, which makes sense because the alternative is hiding the error field again, which doesn't seem to be provided. I tried doing onBlur but that's worse because then the form only validates upon blur.

const form = useForm<FormValues>({
		resolver: zodResolver(formSchema),
		mode: "onTouched",
		defaultValues: {
			accountId: "",
		},
	});