#Type Error Modular Form with Valibot with custom Check

10 messages · Page 1 of 1 (latest)

split ridge
#

I'm creating a register form with RegisterSchema. It have custom validation that check wether password and confirm_password is similar or not.

const RegisterSchema = v.pipe(
  v.object({
    username: v.pipe(v.string(), v.minLength(3), v.maxLength(20)),
    name: v.pipe(v.string(), v.minLength(1), v.maxLength(50)),
    email: v.pipe(v.string(), v.email()),
    password: v.pipe(v.string(), v.minLength(8), v.maxLength(20)),
    confirm_password: v.pipe(v.string(), v.minLength(8), v.maxLength(20)),
  }),
  v.check(
    (input) => input.confirm_password === input.password,
    "Password tidak cocok",
  ),
);

type RegisterForm = v.InferInput<typeof RegisterSchema>;

  const [registerForm, { Form, Field, FieldArray }] = useForm<RegisterForm>({
    loader: useFormLoader(),
    validate: valiForm$(RegisterSchema),
  });

I got this error with valiForm$ with RegisterSchema argument.

  Type 'SchemaWithPipe<[ObjectSchema<{ readonly username: SchemaWithPipe<[StringSchema<undefined>, MinLengthAction<string, 3, undefined>, MaxLengthAction<string, 20, undefined>]>; readonly name: SchemaWithPipe<...>; readonly email: SchemaWithPipe<...>; readonly password: SchemaWithPipe<...>; readonly confirm_password: Schem...' is missing the following properties from type 'GenericSchema<unknown, unknown, BaseIssue<unknown>>': '~standard', '~vendor', '~validate'```

I don't know why. I'm sure I followed the docs.
split ridge
#

hi @snow cedar Sorry that I tag you, but I haven't been able to get concrete solution for this. My temporary solution is to use RegisterSchema as any. but I'm sure there's better solution. Thanks

snow cedar
#

What versions of Valibot and Modular Forms are you using?

split ridge
snow cedar
split ridge
#

Thanks. I moved my schema to zod, now i can move on with my life

split ridge
#

@snow cedar

is there a way to get the response from formAction?
I'm trying to process form submission using formAction and want to return the response back to the client, but i haven't found a way. I tried to return the response and console.log(regionForm.response) resulting in undefined.

export const useRegionAction = formAction$<RegionForm, ResponseData>(
  async (values, requestEvent) => {
    const response = await fetchData({
      requestEvent,
      endpoint: "/api/region",
      method: "POST",
      body: values,
    });
  },
  zodForm$(RegionSchema),
);

Thanks

snow cedar
split ridge
snow cedar