Subscribe

Handling errors in Remix forms

โœ๏ธ

Returning errors to the users in Remix forms

9 May, 2022 ยท 3 min read

Now that we have seen how to create forms, letโ€™s see how we can help the user catch errors and handle them accordingly.

Until now, our app would throw a root error that something might be missing.

But we can make this flow a bit nicer.

If you want to work with me on this one, please start from this GitHub repo.

Seeing the current problem

Letโ€™s run our application and visit the following URL: http://localhost:3000/posts/new.

Now try and submit the form without filling any of the fields.

The first one might work but now try again. We quickly get an error like this:

Error in Prisma Remix

This is pretty normal, as we added an empty row and now trying to add another empty one. This means our database constraints are not unique.

Adding error catching in Remix

But! We donโ€™t even want that first empty row. So letโ€™s make sure we add some basic validation.

In your action function, add the following check.

const errors = {
  title: !title,
  slug: !slug,
  content: !content,
};

if (Object.values(errors).some(Boolean)) {
  const values = Object.fromEntries(formData);
  return json({ errors, values });
}

This is a trivial example, as we would typically have some fancier error checks. But for now, this will throw an error only when these fields are empty.

You can see we return the error object and the actual form values.

Handling the errors in Remix

We can now try out the form and see we donโ€™t get the basic error, but we also donโ€™t see anything else happening.

We need to catch these errors and act on them manually.

In the main component use the action loader like this:

export default function NewPost() {
  const actionData = useActionData();

  ...
}

This action data has access to both the errors and the values object.

We can use the errors to display an error message for each item and the values to set the default values.

return (
    <Form method="post">
      <p>
        <label>
          Post Title:{" "}
          <input
            type="text"
            name="title"
            className={inputClassName}
            defaultValue={actionData?.values.title}
          />
        </label>
      </p>
      {actionData?.errors?.title && (
        <p className='text-red-400'>
          Please fill our your name
        </p>
      )}
      <p>
      ...
	  </Form>
  )
}

Repeat this process for the other fields. Make sure to change the error catcher to the correct variable.

Now when we run our app and leave everything empty, we should be able to see the errors.

Remix error messages

And thatโ€™s it. We now have our basic error handling setup. Itโ€™s a breeze how the Remix hooks enhance each other.

You can find the completed code on this GitHub repo.

Thank you for reading, and letโ€™s connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next ๐Ÿ“–

Adding Markdown plugins in Remix

15 May, 2022 ยท 2 min read

Adding Markdown plugins in Remix

Remix Markdown overview page

5 Mar, 2024 ยท 2 min read

Remix Markdown overview page

Join 2099 devs and subscribe to my newsletter