Using server actions with trigger

[robahtou]

I have a rather large form and not all inputs are required (in fact, only two).

Using server actions I want to validate in the client before submitting the form.
In useForm I set the resolver to ajvResolver and in the JSON Schema I list the required fields required: ['first_name', 'acct_number'].

The handleSubmission function uses the trigger method to manually trigger the form validation (from this thread)

Because the form has many optional input fields, when the trigger is executed the input data of the optional fields is set to '' (empty string) and validation errors for those optional fields are returned.

I was expecting, if a user does not input text in the optional fields, the optional field data is not an empty string but null or the input field is not present in the form data. It appears my thinking here is incorrect, right?

How to go about setting the optional fields to null or removing them from the form data upon submission using the trigger method? Is this possible? Is there another way to tackle this problem? Is this an issue with the resolver?

---

const { formState: { errors }, register, trigger } = useForm<FormSchema>({ resolver: ajvResolver(formSchema) });

async function handleSubmission(formData: FormData) {
  console.log(formData); <--- optional fields are set to ''

  const isValid = await trigger(); <--- optional field errors also validate on empty string

  if (!isValid) {
    console.log(errors);
  } else {
    return formAction(formData);
  }
};

[robahtou]

Commenting here for posterity

This issue took me down a rabbit hole. The good type.

The initial main concern, and the reason I posted here, was that I didn't understand how FormData worked, nor how RHF works with forms in general, and how RHF works with validators. I knew how to implement some functionality by working through examples and reading the docs. But that wasn't enough. Anyways, below are my take aways (see repo for specifics https://github.com/robahtou/issues-react-hook-form):

1. RHF doesn't work well with React Server Actions
2. RHF works well & expected with a validator if you use the onSubmit={handleSubmit} variant (see 1)
3. Set of requirements:

* validate both on the client & server
* optional form fields that have no user input are removed before validating
* optional form fields are not sent over the wire to the server

4. Do not validate using RHF (don't use resolver)
5. Use the validator directly (i.e. zod: safeParse, i.e. ajv validate)
6. Validation errors have to use RHF setError to propagate errors to the form