validationError for client side?

[niklasgrewe]

Hi, thank you very much for simplify form validation in remix. This package is awesome and works really well. But in my project, i miss something. I need to validate a form client side in onSubmit() , because i am using supabase. When something fails, i want to sent an error to a specific field like i do this server side:

if (await userExistsInDatabase(username)) {
    return validationError(
      {
        fieldErrors: {
          username: "This username is already taken",
        },
        // 🚨 Important!
        // If you're using the `subaction` prop,
        // you need to specify a subaction here
        // or else the errors won't be displayed.
        subaction: result.data.subaction,
        // You can also provide a `formId` instead of a `subaction`
        // if your form has an `id` prop
        formId: result.formId,
      },
      result.data
    );
  }

How can i use this kind of function client side? Is that possible? It would be awesome, if i can set related field errors client and server side in the same way.

[airjp73]

We don't currently have an API that does this, but it would be pretty straightforward to add. On the client side we could simplify it a lot and just have a setErrors helper returned from useFormContext. And maybe we could pass that directly to onSubmit.

Something like this maybe?

onSubmit={async (data, event, formContext) => {
  const { setErrors } = formContext;
  const isValid = await supabaseValidation(data);
  if (!isValid) {
    setErrors({ myField: 'Error!' });
    event.preventDefault();
  }
}}

[niklasgrewe]

this is exactly what i need, would be happy if you could include this 👍

[mtin79]

👍🏻 Would love to have a way to get the form errors on the client side without (yet) having custom input props that show errors.

Just struggled with using ValidatedForm as a replacement for Form and wanted to include custom input types that recognize errors via "useField(name)" hook at a later stage.