Current section: Schema Validation 5 exercises

Form Submission and Error Handling with Conform & Zod


00:00 Let's pull open our editor and we're going to swap all this stuff for the ConformParse utility from Conform2Zod. So this is going to give us back a submission object. We're going to say parse

00:12 and that's coming from Conform2Zod. We're going to pass in our form data and our schema is going to come from our note editor schema right there. And with that now, instead of taking the results

00:26 and all of that, we have this submission object. This submission object has a couple of properties on it that are not displayed here. So let's just take a look at those. So you've got error, intent, payload, and value. Now we won't be working directly with a couple of these. The payload

00:46 is like the raw data that was submitted. The error is going to be all of the error messages and stuff. The shape of that will resemble in some ways what we've had before. The intent is going to be a little bit different from the intent that we talked about in a previous workshop. This

01:01 is something that's specific to Conform that we will be using a little bit later. The value is going to be the properties that were parsed from our form data. If there is no value, then they were not parsed properly. So that's how we're going to know that we had an error is if

01:20 there is no submission value. So we'll say submission.value. If there was no submission value, then instead of returning the errors, we're going to actually just return the submission. And the cool thing about returning the submission is that because it includes the payload, it's going to

01:37 send back to the user what they submitted. What that means is if they submitted the form and the JavaScript hadn't loaded yet, we're going to send back that payload. And so they'll be able to look at the changes that they made to the data even through that full page refresh. So this is

01:54 actually a really cool piece of Zod. Zod is just so committed to progressive enhancement that it handles little things like that. So we're going to need to handle that here in just a moment. And then down here, we'll get submission.value. And all of this is exactly as it was before. So

02:12 not a whole lot of changes here, really just changing from the Zod parsing to the parsing from Conform and its integration with Zod and then changing how we do our errors a little bit. The UI side is where things get a little bit different, but not too terribly different.

02:30 So instead of the action errors, field errors, we actually grab that from the action data submission. So that will be right there. And then instead of the form errors, Zod actually

02:44 encodes form errors in a similar way to the way that the browser handles form errors. And that is with the empty string right there. And so we will add this right there and that'll get us our form

02:59 errors. And with that, we get the same behavior we had before. So the user has no idea that things are any different. They will work exactly the same way that they always did as far as the user is concerned. But now we have a little bit nicer experience in our action and we've

03:16 opened ourselves up to making some really great changes to our UI.