Does this support async validation & file inputs? about remix-forms HOT 2 CLOSED

Hey, @vedantroy! Thanks for creating this issue 😄

The short answer is yes to both questions. Here's the long answer:

Async validation

1. I created an example of the quick and dirty way of doing it with async refine on the schema. The downside is that it runs your async validation for every field. I don't recommend this unless it's a very simple form or a prototype you want to validate quickly.

2. You can also do that by creating a 100% custom input and taking control of its onChange and onBlur events. The downside is that you'll have to render the custom errors yourself, similarly to the example you sent. You can access the regular validation errors through the errors prop in Field's children render function. You can also access the Errors component from there. Then, you can render the regular errors + your async validation errors inside Errors.

3. The most robust way to achieve that, I think, would be to create a custom resolver for your form and pass it to Remix Forms. But I don't know if many people would want that, so I haven't implemented a way of passing a custom resolver yet. Would this be something you'd use?

File inputs

We don't have any special API for dealing with file uploads, but I believe we don't need any. Since file inputs don't offer much in terms of validation, you can omit them from your schema, render them directly on the form, and follow Remix's way of dealing with uploads, like this:

const schema = z.object({
  firstName: z.string().nonempty(),
  email: z.string().nonempty().email(),
})

const mutation = makeDomainFunction(schema)(async (values) => values)

export const action: ActionFunction = async ({ request }) => {
  // Create your custom upload handler
  const uploadHandler = unstable_createFileUploadHandler({
    maxFileSize: 5_000_000,
    file: ({ filename }) => filename,
  })

  // Don't forget to clone the request: formAction will need to use the original later on
  const clonedRequest = request.clone()

  // Get the multipart form data with the upload
  const formData = await unstable_parseMultipartFormData(
    clonedRequest,
    uploadHandler,
  )

  const file = formData.get('attachment')

  // Do something with the file
  console.log({ file })

  return formAction({
    request,
    schema,
    mutation,
    successPath: '/success',
  })
}

export default function Component() {
  return (
    <Form schema={schema} encType="multipart/form-data">
      {({ Field, Errors, Button }) => (
        <>
          <Field name="firstName" />
          <Field name="email" />
          <input type="file" name="attachment" />
          <Errors />
          <Button />
        </>
      )}
    </Form>
  )
}

PS: we don't like dealing with multipart form data, so we usually do our uploads asynchronously and only send the metadata on the forms. When we do that, we can add the metadadata to the schema and use it inside our domain function :)

from remix-forms.

Hey, @vedantroy! We just added an example of async validation with custom inputs. Check it out: https://remix-forms.seasoned.cc/examples/forms/async-validation

In the end, it was much easier than I expected :D you could add a pending state to yours, of course, but since the validation will also happen on the server, I didn't think it was necessary.

Also, there is no need for throttling or debouncing, since Remix will cancel the extra requests for us 🎉

I'm closing this issue, but feel free to reopen it if you need anything else.

Thank you so much for creating this issue!

from remix-forms.