Fixing a form validation bug in the Epic Stack
In this video, Kent fixes a bug in the Epic Stack onboarding form submission by ensuring the transform
does not run when the form's intent
is not submit
. Side-effects in Zod + Conform submissions should only happen when the form is actually being submitted (as opposed to simply validated).
Learn more about form transforms with Transforming Form Data into Sessions: A Look into Zod and Conform.
Transcript
00:00 Hello, Louise, I think. What's up? Thank you so much for posting this. I just wanted to show you what I see and yeah, let me know what you think. So yeah, this is an interesting one.
00:14 I'm gonna follow your steps and we'll see. So we'll go to create account, we'll say hannah at example.com, submit that, we'll grab the code and paste that in here and then we'll go through the onboarding process. So my username is Hannah, Hannah rocks And here we'll just copy your password here. And your confirm password just adds a period. Well, it didn't select, but yeah, add a period.
00:43 And then say, yeah, don't check. Do you agree? Create an account. You have to check this. Now, the fact that we're not getting multiple errors is frustrating.
00:52 And it's probably why Edmund made a pull request to make a change to this so that we could see all these errors at once. I don't understand why we're not seeing all these errors all at once. It seems surprising to me. But this is probably why, or the change that he made will probably fix that. And so I'll have to look at that later.
01:12 It involves using a .and on our Zod schema, which I'd never seen before. So we check that. Here's what you say. Hit submit, you get the error. Check the TOS and submit, you get an error for the password.
01:23 And that's what I get there. And then we fix the password and get an error from the username. So if I fix the password, I don't get an error for the username. So maybe it's like going off screen possibly? So let's try that again.
01:39 And I will not go off screen. Bob at example.com. And we'll grab this code here, submit that, and say BobbyTables, BobbyTables, and then stick that password in there and with a dot and then don't agree we agree and password is match Yeah, so I'm not able to reproduce the issue that you've got but it is it is possible that the problem involves, or the solution involves what we're doing here in the login. So here with the login, we have a function for the schema and that accepts an intent. And then you can check that intent before you do the transform.
02:30 In our case, our transform doesn't do any error handling. There's nowhere in here where we're gonna check for an error or whether something doesn't work. We expect everything here to work. And so where it makes sense with the login is we're gonna try and make the session with the login data that includes the username and password, and it's very possible that username and password is wrong. And so that's why we have this validation here.
03:00 But as far as this is concerned, if the intent is not submit, we probably shouldn't even get here. I don't know. Maybe not. So the solution here, and I'll probably commit this, but the intent should be passed as a parameter. And then if we say if the intent is not equal to submit, then we'll return no session.
03:21 That actually, I'm gonna commit that right now. That is the solution for that. Yeah, HMR makes that, those toast messages and stuff happen again. But yeah, so as far as the actual bug that you're describing, I don't know, I haven't been able to reproduce this, but I'm gonna push this right now, and then you can test it out and let me know if you get the same problem. But this should fix that problem.
03:50 That's what I initially thought when I saw this. Like, oh yeah, I need to mention the intent. And then as far as the schema not showing all of the errors right away, I'm pretty sure that Edmunds pull request from a little while ago, it's already been merged, but I left out that change because I didn't understand why it needed to be there. So pretty sure that change should fix it. I'm not sure why though.
04:17 But yeah, so hopefully this helps and thank you for posting the very descriptive The issue see ya
- Play Replace Remix's unstable_parseMultipartFormData with @mjackson/form-data-parser
Replace Remix's unstable_parseMultipartFormData with @mjackson/form-data-parser
- Play Epic Workshop Diff Tab Demo
Epic Workshop Diff Tab Demo
- Play Epic Workshop Test Tab Demo
Epic Workshop Test Tab Demo
- Play Get Started with the Epic Workshop App (for React)
Get Started with the Epic Workshop App (for React)
- Play Prisma Typed SQL Queries
Prisma Typed SQL Queries
- Play A Deep Dive in Tailwind Font Settings
A Deep Dive in Tailwind Font Settings