Triggering validation of unregistered inputs via setValue()?

[mogelbrod]

First of all, thanks for a great open source library - and kudos for the seemingly super quick response times you have on discussions and issues!

On to the question:
I spent an hour today debugging an issue where some semi-controlled (using setValue()) form fields didn't seem to hide/show validations errors upon input, only on submit (using mode: 'all', plus shouldUnregister: false to avoid having to use hidden inputs). After a while I discovered that it was due to the broken fields not being registered, which made me curious about if getting validations to work without field registration is possible? The fact that setValue() takes an optional shouldValidate flag made me think that it was already possible, but it appears not to be the case - without any hacking into the library internals?

This codesandbox should showcase what I'm trying to accomplish.

1. shouldUnregister: false ensures unregistered field values remain
2. resolver defines validations for unregistered field(s) as well as registered ones
3. setValue('unregistered', value', { shouldValidate: true }) should trigger validation of the unregistered field

With these 3 steps taken I expected validations to be triggered when validity of the unregistered field changes, but alas that doesn't happen right now. I've skimmed around the source code but haven't found a specific reason as to why this shouldn't be possible.

Thanks in advance, and thanks again for this great project 👍

[wdfinch]

Your second input is never registered. setValue does not register inputs. It sets the value of an already registered input. To register an input you either need to use the register ref or <Controller/>. I believe you want in the second case.

Only registered input's values become part of formValues, and only formValues get validated.

[mogelbrod]

Thanks for the reply!
Indeed, that's the reason for me asking this question:

After a while I discovered that it was due to the broken fields not being registered, which made me curious about if getting validations to work without field registration is possible?

Since setValue() does set values for unregistered inputs I was hoping that it would also trigger a re-render when the validity of the input being set was changed.

In the meantine as a workaround I'll look into if calling register(name) just before calling setValue(name, ...) is reasonable.

[GaneshSinghPapola]

did you resolve it?

[mogelbrod]

Unfortunately not. I've started migrating to v7 now but with the change to register() even the workaround likely no longer works. @bluebill1049 could this be a potential addition to v7? Perhaps v7.1 in case the v7.0 release is feature freezed?

[leapful]

@mogelbrod @GaneshSinghPapola @wdfinch

Method "setValue" with option "shouldValidate: true" only triggers validation for registered field name. Method "trigger" should be used in order to force validate the unregistered field.

For example:

onChange={(event) => {
   setValue('unregistered', event.target.value);
   trigger('unregistered');
}}

Working sample: https://codesandbox.io/s/react-hook-form-validation-of-unregistered-input-forked-cyvj6

[sinnrrr]

for those, to whom this didn't work, double-check if you have specified shouldUnregister: false in hook options (check out codesandbox)

[SocDario]

Mate, you saved my day !!!!

[arielerv]

Something similar happened to me, and I had a hard time finding a solution. Maybe it will help someone else.

  useEffect(() => {
    if (regex.BACKEND_DATE_FORMAT.test(watched)) {
      const formattedDate = getFormattedDate(watched);
      setTimeout(() => setValue(name, formattedDate), 0);
    }
  }, [watched]);