Formik

In this article, I will show you how to handle form errors using React, Zod, Formik. You will learn how to create a form that supports both create and edit operations, how to fetch data for dynamic parts of the form with loading and error handling, how to validate the form using Zod, how to mock server errors using MSW, how to use Formik to manage the form state and submission. The form will also have features such as disabling during submission, displaying field errors, validating initial values when editing, and validating submit input when submitting. I will also cover some of the edge cases and best practices for form error handling with unit tests.

Let`s assume a situation like this. You are a moderator on a social media app. You got the report that users with the nickname "Legend27" and "Bob123" do not behave well in the comment section. You just collected all suspicious comments, but the manager told you that "Legend27" is specially treated and can not get account suspension. To handle this situation you should unselect the "Legend27" value from the "users" input, and the application should clean up only values related to the unselected user, but the rest of the comments leave without modification.

Forms are primary components available almost on any website. We are using them to collect information from users. Starting from a simple contact form to a complex multistep order form. Managing multistep forms can be cumbersome, especially when we add custom validation.