issue: isValid is false but errors is empty when using an invalid value (based on the validation) in defaultValues

[ilyanikulin]

Version Number

7.43.9

Codesandbox/Expo snack

https://codesandbox.io/s/blazing-worker-5mpslw?file=/src/App.js:219-230

Steps to reproduce

1. Go to the provided sandbox
2. See that the default value is set to an invalid value based on the yup scheme
3. See that isValid=false and errors={}

Expected behaviour

isValid=false
errors={name: {...}}

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[ilyanikulin]

honestly, this issue is from #10250 (comment)

[leapful]

@ilyanikulin

This is an expected behavior of common form handling.

For example, when opening a login form with field username and password, those fields are required by default but you will not see error message on them until you touched it and trigger validation.

Could you please explain what the use case to show error message on form initialization ? If you really want to do this, just call trigger method after form is initialized to force validate it.

[ilyanikulin]

@leapful
I need to init form with the first data and user should see where errors are without touching any fields.
do you suggest using trigger()? without arguments? when should I use it? I don't see handlers of initial data such as onInit or something like this.

[bluebill1049]

This is by design as we implemented a validation strategy for a better user experience, users shouldn't have seen errors before they start to interact with inputs. If your app has a specific use case, then trigger is the correct API.

[ilyanikulin]

maybe would be better to make it as additional option?
are there handler of init form? when i need to use trigger?

[leapful]

@ilyanikulin

Please use useEffect to perform trigger method and validate the whole form at the initial time.

[danielmarcano]

Hi, @ilyanikulin, I have encountered the same "issue".

In my case, we have a time range modal that, when opened, has default "Start" and "End" time values pre-selected. Nonetheless, if these conflict with any time ranges you have already added, an error should appear right away so that you understand why the "Add" button is disabled (since formState.isValid is false, even though the formState.errors has no errors).

So we ended up doing this:

const defaultValues = useMemo(
    () => ({
      start: currentTimeRange?.value?.start ?? DEFAULT_FORM_VALUES.start,
      end: currentTimeRange?.value?.end ?? DEFAULT_FORM_VALUES.end,
    }),
    [currentTimeRange?.value?.start, currentTimeRange?.value?.end],
  );

  const {
    control,
    register,
    handleSubmit,
    getValues,
    trigger,
    reset,
    formState: { errors, isSubmitting, isValid },
  } = useForm<TimeRangeModalForm>({
    mode: 'all',
    defaultValues,
  });

  useEffect(() => {
    reset(defaultValues);
  }, [defaultValues, reset]);

  /**
   * Needed to trigger React Hook Form's validation for defaultValues,
   * since by design the library does not trigger them for accessibility reasons
   */
  useEffect(() => {
    void trigger();
  }, [trigger, isValid]);

  return {
    control,
    errors,
    register,
    handleSubmit,
    disabledSubmit: isSubmitting || !isValid,
  };
}

Hope this can be helpful to you!

[MihirModi1421]

hello everyone,
i am facing some issues in validation as shown in uploaded video at the end
when i write password error is there but when password field is null i do not want error as there is no input as shown in end of video in "Confirm Password" field, as in yup.schema i have defined null value is accepted why does error not go after it
is there is any problem in yup.schema or react hook form implement i do not know
buy the way i use control and custom input box made my be as below image



Screencast from 05-05-23 06:49:16 PM IST.webm
some advice will be appriciated as i do not get what to do in this case senario
also any other better approach will be helpful

[okevino47]

up
i am encountering the same problem but no answer on the diferents topics were provided