Form client side validation

[axelvaindal]

Hello 👋,

I'm trying to create a wrapper around useForm from @inertiajs/react but I'm having a bit of trouble understanding how to wrap around the typings which feels restrictive 🤔

I'm using yup as the validation library.

Here is the code I have:

const isValid = useCallback(
    (data: T) => {
      form.clearErrors();

      try {
        schema.validateSync(data, { abortEarly: false });
        return true;
      } catch (error) {
        if (error instanceof ValidationError) {
          const formErrors: FormDataError<T> = {};

          error.inner.forEach((validationError: ValidationError) => {
            if (!validationError.path) {
              return;
            }

            // Replace [0] notations to .0 so it's easier to map errors
            const path = validationError.path.replace(/\[(\d+)]/g, ".$1");

            if (path && isFormKey<T>(data, path)) {
              formErrors[path] = validationError.errors[0];
            }
          });

          form.setError(formErrors);
        }
        return false;
      }
    },
    [form],
  );

Problem is the setError call complains FormDataError is not assignable to FormDataErrors.
I've tried transforming :

const formErrors: FormDataError<T> = {};

// into 

const formErrors: FormDataErrors<T> = {};

But then it complains that {} does not match the FormDataErrors<T> type.

I'm kinda stuck with this and although the code works, I'd like to get rid of the type assertion if possible.

Does anyone has an idea ? 🤔

[SantosVilanculos]

For now, you have two options:

1. Set the errors manually. See: https://medium.com/@santosvilanculos/client-side-validation-with-zod-and-inertia-js-form-component-33af58cd4806

2. Or, use laravel/precognition.
   The implementation in the inertia core is coming soon, i hope. See: Support for Precognition in <Form> component #2619.

[axelvaindal]

@SantosVilanculos Thanks for the answer.

Your first option is exactly what I did, though on the useForm hook and with yup instead of zod.
The code works, but the Typescript types are not working properly because it feels like there is no way to respect the currently exposed types when implementing a custom solution so I had to ts-ignore them, which bugs me.

And indeed, laravel/precognition might be a solution but not officially supported yet 😕