Validate Form Data Through a Remix Action using Zod

At this point, your form will accept any type of input that users desire. This isn't good, you need to add form validation.

Form validation is another area that there are many ways to accomplish what you need. One great way to get easy form validation is through a library called Zod. Zod allows you to create a schema to parse your form input against. It will return form and field errors when input doesn’t match the rules that you supply.

With Zod in place, you’ll check form input in the action previously defined. If an error is found, you’ll return an object passing in the errors you find as well as the input that users submitted. This will be used to render error messages in the form and reset form state to what was submitted. This is easy to accomplish with Remix json helper that will also set the error message for you.

Along the way you will also see how easy it is to type this data.