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