How to check if a field is validated?

[isaiahtaylorhh]

Using the new { mode: 'isTouched' } feature, I want to be able to show status icons alongside input fields. Green check mark if the field is valid, red x if the field is invalid.

I know how to check whether the field is invalid using errors.fieldName. But how do I check whether the field has been validated? Lack of errors tells you that one of the following is true: the input is valid OR the input has not been validated yet.

Basically, is there anything that will expose the validation state for a field?

[yordis]

@bluebill1049 Hey there, I am interested in this feature as well, is there any opportunity to add this to the code base or write some guidelines?

[yordis]

Based on FormiK

https://github.com/formium/formik/blob/1fe99f1780333108bd4147de74fb4ec8573b41b8/packages/formik/src/Formik.tsx#L970-L979

It would be something like:

import { UseFormMethods } from "react-hook-form";

function isFieldValid<TFieldValues, K extends keyof TFieldValues>(form: UseFormMethods<TFieldValues>, field: K) {
  return form.formState.dirtyFields[field] && !form.formState.errors[field]
}

I am new to react-hook-form so I am not sure if react-hook-form implements the initial validation phase as Formik does.

[yordis]

@bluebill1049 would be good to add this to the package since it is a really common pattern.

[bluebill1049]

thanks will consider that

[yordis]

@bluebill1049 I find myself copying that function everywhere now.

Could we get this functionality built-in?

[bluebill1049]

Hey @yordis i hear your pain, would you like to send a feature request and we will pin to the board see if many have the same request. In the meantime, how about consider this solution: https://react-hook-form.com/advanced-usage#ExtendController to include that extra state.

[Alntjan]

hey @bluebill1049! Is there any way to know when a specific field is validating? I have some async functions inside the validate object and I wanted to be able to show a loading state on my input so the user knows what's happening 😄 thanks

[bluebill1049]

Using the new { mode: 'isTouched' } feature, I want to be able to show status icons alongside input fields. Green check mark if the field is valid, red x if the field is invalid.

I know how to check whether the field is invalid using errors.fieldName. But how do I check whether the field has been validated? Lack of errors tells you that one of the following is true: the input is valid OR the input has not been validated yet.

Basically, is there anything that will expose the validation state for a field?

you can combined with dirty fields

[Raphaww]

Not really, checking errors.fieldName && dirtyFields.fieldName would only work for 'required' but not for other validations

[nathggns]

Is there no official way of doing this at the moment?

[npearson72]

This would be a really helpful feature. Mantine has a form.isValid() function that can accept a path to the field:

https://mantine.dev/form/use-form/#validation

Would be nice if it could also accept an array of paths.

[Dovakeidy]

If you are using a resolver, you can use the control._executeSchema method :

export const useInput = ({ name }: UseInputProps) => {
  const [isValid, setValid] = useState(false);

  const { control } = useFormContext();

  const {
    field,
    formState
  } = useController({
    name,
    control,
  });

  useFocusEffect(
    useCallback(() => {
      (async () => {
        try {

          const { errors } = await control._executeSchema([name]);

          setValid(!errors[name]);

        } catch (err) { }
      })();
    }, [field.value])
  );

  return {
    field,
    formState,
    control,
    isValid
  }
}

[JunyeongChoi0]

So no updates until now?

[sethburtonhall]

It would be very helpful to check that a field is valid just like you can check if a field has an error. What is the best approach here?

[Dovakeidy]

If you're using a resolver, you can try my method mentioned above with the internal "_executeSchema" function. It works fine

[sethburtonhall]

My understanding is that useFocusEffect is from https://reactnavigation.org/docs/getting-started#minimum-requirements which requires React Native. I am not building a mobile app. Am I misunderstanding?

[Dovakeidy]

The important part is this :

const { errors } = await control._executeSchema([name]);

You can use this to get the errors of a specific field in your form.