onMount async validation

[ruudandriessen]

We currently have async validators for both onChange and onBlur, however, none are available onMount. In our use case, we have a form where we pre-fill a name, however, we validate this is unique by sending an async request to the server.

We'd like to have this validated onMount, such that conflicts are shown immediately to the user - however, it seems we only have a sync onMount validation method. Is there any reason we don't have a onMountAsync?

[eckmLJE]

We also require this. I suppose the workaround for now would be to fire off and await your async validation call (outside of react form) ahead of mounting the form, then fold that result synchronously into the onMount validator when you mount useForm.

[crutchcorn]

The biggest reason we didn't implement this is that it felt duplicative to us in comparison to useQuery from @tanstack/react-query.

Does this not solve your needs?

[MelDommer]

I was just running into this as well.
I am not sure I understand your answer completely.

Is the suggestion to use this:
https://tanstack.com/form/latest/docs/framework/react/guides/async-initial-values#basic-usage

and once you have the data, then run validations yourself first to build up some default errorMap and supply that along with the default values?

So something like:

• Fetch Data
• Validate data
• Then render form using the default values/errors

it felt duplicative to us in comparison to useQuery

Or does that mean something completely different?

Thanks.

[eckmLJE]

I have an endpoint that serves a chart configuration business object that references other user-generated assets used in generating the visualization. That route handler is not responsible for validating those related assets, it just serves the object. I get that object and I initialize the form with it.

Then I have my form and its validation schema that involves firing off validation requests to a separate endpoint for these selected assets. e.g. in my existing react-hook-form resolver, it does something like

const resolver: Resolver<ChartFields> = values => {
  const errors: ChartFieldsErrors = getRequiredErrors(values) // this validates required fields synchronously
  const assetErrors = await fetchQueryValidateAssets(queryClient, values) // this requests server side validation of selected assets

  assetErrors.forEach(/* assign errors to fields */)

  return { errors, values }
}

This works great for onChange. The recommended "on mount" validation behavior in react-hook-form, which completely lacks an onMount mode while including onChange, onSubmit, onBlur, all, is to call a useEffect with useForm result.trigger().

The use case is that we have a defined validation schema that is built into the form, and we want that to fire on initialization, keeping the form in an isValidating state from mount that lasts until that on mount async validation is completed.

If I understand correctly, you're suggesting we do the workaround I mentioned above, where we have a dependent query for the validation, that will fire once on mount to send off the validation request, then wait to mount the form until we have that result, and pass it into the synchronous onMount validation. Or, optionally add the validation operation to the chart fields route handler (this can measurably increase latency for this critical get).

const ChartFieldsFormLoader = () => {
  const { data: ChartFields, isSuccess: isSuccessChartFields } = useChartFields();
  const { data: ChartFieldsValidationResult, isSuccess: IsSuccessChartFieldsValidationResult } = useChartFieldsValidation({ chartFields })

  return isSuccessChartFields && isSuccessChartFieldsValidationResult
    ? <ChartFieldsForm chartFields={chartFields} chartFieldsValidationResult={chartFieldsValidationResult} />
    : <Loading />
}

const ChartFieldsForm = ({ chartFields, chartFieldsValidationResult }) => {
  const form = useForm({
    defaultValues: chartFields,
    validation: {
      onMount: chartFields => {
        // do something with chartFieldsValidationResponse to apply validation
      }
    }
  })

This works, but it has a couple issues:

1. We can't mount/populate the form until validation completes. Our validation operation can take some time. It would be great to get the form values in and rendering to the user while we validate in the background, blocking submission during that time but allowing the user to review and update the form.
2. We have duplicated the validation approach from the form out into the loader. Not a big deal as these functions can just be repeated / reuse the same configuration, but it would be ideal to have this all contained in the form.

Maybe I'm misunderstanding the suggestion, please correct me if so! And I also understand if some design decision about how you initialize the form is preventing this from working easily, and the workaround should be sufficient given the level of effort to implement onMountAsync.

Thank you! 🙌🏻