Add shouldTouch to trigger options?

[SPodjasek]

I was trying to implement validateOnMount feature I used with Formik and ran into a minor issue, which turned out to be related to my code being dependent on touched status when adding styling to fields. Nevertheless, IMHO it would be helpful to implement this feature - so that you could request to trigger mark all fields it operates on as touched like this:

trigger(undefined, { shouldTouch: true });

And another case for handleSubmit to have same setting as well.

My possible use cases for this settings include:

1. Do initial validation by using trigger without shouldTouch so that no field gets touched, fields show validation marks only on ones with errors, valid fields don't show nothing until they get touched by user,
2. Do initial validation with shouldTouch, so that every field will display validation marker,
3. When handleSubmit is called without shouldTouch only fields with errors are marked with validation icons - not touched fields are left as is,
4. Finally when you set shouldTouch on handleSubmit user gets a visual notification on every field that it was valid waiting for submission to finish.

[bluebill1049]

i believe you can do that with setValue

setValue('name', 'data', options)

[Song1201]

I have a use case where shouldTouch would really help. And setValue is hard to utilize for that case. Is it possible to implement shouldTouch option on trigger?

It's a stepped form where all steps are in the same form. The form is in onTouched mode. And we want to validate all fields on the current step before letting user advance to the next step. Currently we're using trigger on all fields on current step. However, after trigger, error won't disappear as user types in a field and make it valid, because onBlur has not been triggered on the field yet. If we can mark the field as touched using trigger, I think that should solve the problem.

With setValue, I would have to get all values for the fields I'm triggering, set their value to their current value, with shouldTouch: true, which feels like a very hacky way to do this.

Context for why the steps are in a big form: We want to use the wizard for both create and edit. In create, we need the steps to be sequenced, however, in edit, we want user to be able to jump between steps using a navigation panel and directly go to the step they need to edit. So it's very hard to manage form values if we have separate forms for each step.

[carlos-dubon]

@SPodjasek I am in the same situation as you. I only show field errors if they have already touched the input. I use the onChange validation mode.

I made this wrapper around trigger which serves my needs:

import {FieldValues, UseFormReturn, Path} from 'react-hook-form';

export async function triggerForm<T extends FieldValues>(
  form: UseFormReturn<T>,
): Promise<boolean> {
  for (const [key, value] of Object.entries(form.getValues())) {
    const name = key as Path<T>;

    form.setValue(name, value ?? '', {
      shouldTouch: true,
    });
  }

  return form.trigger();
}

Usage:

const form = useForm(...);

triggerForm(form);

[carlos-dubon]

import {UseFormReturn} from 'react-hook-form';
import {triggerForm} from './triggerForm';

/**
 * Triggers validation for multiple forms with different structures
 * @returns false if any form validation fails
 */
export async function triggerForms(
  forms: UseFormReturn<any>[],
): Promise<boolean> {
  const results = await Promise.all(forms.map(form => triggerForm(form)));
  return results.every(result => result);
}