is there any way to check if a specific field isValid instead of the whole form?

[renanleonel]

i'm currently facing an issue with my form, because i need to add a "valid" state to each field if ti satisfies the schema validation. however, i can only check after submitting if the form is valid:

const { formState: { isValid }} = form;

the feature i need to implement is add a green border to the input if it is a valid input, before submitting the form. is it possible to verify if only a field is valid, for example, form.getValues('name').isValid?

this is my current implementation, but checking if the whole form is valid instead of the specific field:

import { Form } from '@/components/ui/form';
import { FormType, formSchema } from '@/types/schema';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';

export default function Home() {
	const form = useForm<FormType>({
		resolver: zodResolver(formSchema),
	});

	return (
		<Form {...form}>
			<Field.Component form={form} />
		</Form>
	);
}

interface ComponentProps {
	form: UseFormReturn<any>;
}

const Component = ({ form }: NameProps) => {
	return (
		<FormField
			control={form.control}
			name='name'
			render={({ field }) => (
				<FormItem>
					<Input valid={form.formState.isValid} {...field}/>
				</FormItem>
			)}
		/>
	);
};

[Moshyfawn]

Would the trigger method work for you?

Otherwise, there's a getFieldState method that has been introduced in v7.25.0 you can call on the field level that has the errors object you can check against to find out if the field is valid or not. There's an invalid property too, but it's deprecated in favor of errors.

[renanleonel]

i've already tried using watch and getFieldState, but to do this i need to create an separate function that does the verification for me, instead of using my zod schema with the resolver. i don't think that the trigger would work here because if the user starts typing and the input isn't valid, the error message will be triggered 😢

edit: updated original question w/ example code

[ShahriarKh]

Are you sure that getFieldState doesn't work with zod? I guess this comment is outdated, because it works fine with rhf 7.53.0, resolvers 3.9.0 and zod 3.23.8.
Minimal Code:

const { register, formState, getFieldState } = useFormContext();
const state = getFieldState(name, formState);

const error = state.error;
const valid = !error && state.isDirty;

return (
  <input
    {...register(name)}
    className={clsx(css.input, {
      [css.valid]: valid,
      [css.invalid]: error,
    })}
  />
)

[atif1169]

@renanleonel @ShahriarKh @Moshyfawn You can use the triggers method.

Manually triggers form or input validation. This method is also useful when you have dependant validation (input validation depends on another input's value).
Docs Link: https://react-hook-form.com/docs/useform/trigger

[zigcccc]

I'm also facing a similar requirement, and the getFieldState does not work for my use case.

This is the setup:

const schema = z.object({
  firstName: z.string().min(1),
  lastName: z.string().min(1),
});

function Parent() {
  const form = useForm({
    defaultValues: async () => {
      const initial = await fetchSomeData();
      return { firstName: initial?.firstName ?? '', lastName: initial?.lastName ?? '' }
    },
    mode: 'all',
    resolver: zodResolver(schema),
  });

  return (
    <Provider {...form}>
      <TheRestOfTheForm />
      <Child />
    </Provider>
  );
}

function Child() {
  const { formState, getFieldState } = useFormContext();

  const { invalid } = getFieldState('firstName', formState);

  return <span>First name is {invalid ? 'not ok' : 'ok'}</span>
}

now, when the default value for the firstName is set to the fallback of '', the field should be invalid. But what I get is the opposite - the invalid is false.

I'm using:

• rhf@7.75.0
• @hookform/resolvers@^5.2.2
• zod@^4.4.3

so everything is at latest, making the comment above not outdated.

The trigger approach is... strange to set up. There's an assumption there that the user has to interact with the app somehow. Manually clicking a button to trigger validation is strange and not really "real-world" use case (but is what the examples are using for some reason).

Which brings me to the original question - is there a (good) way of getting an up-to-date field level validation result?

[yudin-s]

getFieldState() can work with a Zod resolver, but there are two details that are easy to miss:

1. the field has to be validated at least once
2. the component has to subscribe to the right part of formState, otherwise it can read stale state

For a field component, I usually prefer useController because it gives you the field state directly:

const { field, fieldState } = useController({
  control: form.control,
  name: "name",
})

const valid = fieldState.isDirty && !fieldState.error

return <Input {...field} valid={valid} />

And configure the form so validation runs before submit:

const form = useForm<FormType>({
  resolver: zodResolver(formSchema),
  mode: "onChange",
})

If you want to use getFieldState, pass the subscribed formState into it:

const { formState, getFieldState } = form
const nameState = getFieldState("name", formState)
const valid = nameState.isDirty && !nameState.error

For the async defaultValues case mentioned above: default values are not necessarily validated just because they were loaded. If you need the UI to immediately show that an empty async default is invalid, call trigger("firstName") after the defaults are ready, or trigger the fields you care about in an effect. Otherwise RHF has no reason to mark that field invalid yet.