00:00 Schema validation, all right. So I don't know about you, but when I see something like this, I'm like, that would be awful if I had more than just two fields, or even more complicated validation logic. And I have been down this road before, and I have created utilities like this one. You know what?

00:19 That's just about as awful. And so I don't really like having to write a bunch of these utilities. It would be really nice if we had a generic utility that had some nice declarative API that allows us to just kind of define a shape of an object. Very similar to PropTypes, if you remember that from the old days of React.

00:39 Actually, back then, I was still doing AngularJS when PropTypes became a big thing that people were talking about in the React community. And so I created my own implementation of PropTypes that was extracted outside of React. That ended up working out super well with another form library

00:57 that I maintained called Angular Formly. The library was called API Check. It was pretty cool. But yeah, I've taken this to the extreme, and I'm really glad that somebody else has done an even better job. And that is using a library called Zod.

01:15 So with Zod, you have this schema that you define, and then you can parse the values. And then you get a result object. And based on that, it'll have a success. If it's successful, then we get our result.data. If it's not, then we get a result.error. And there are all kinds of things you can do with Zod. Zod is actually TypeScript first.

01:35 And so you can actually, once it's been parsed, you know that the type is correct. And TypeScript is well aware of everything that Zod can do, and it's fabulous. So here we can say, hey, we want a string. It's a max of five characters. It must be five or fewer characters long. You can specify a custom message.

01:54 You can derive the type. So you can infer the type based on a schema, which is actually really nice for taking arguments and things like that. You can specify more custom error messages based on the different types of errors that can happen for some of these validators.

02:10 You can specify a shape and also arrays and say non-empty, all sorts of things. And so Zod is really, really powerful for doing that kind of schema validation. You've got refinements and a bunch of other things that we'll get into later. We're also, in this exercise, going to be using another utility

02:29 that will take the Zod schema and turn it into something for forms specifically. Zod wasn't built for forms, but Conform was. And so Conform has a couple of really awesome utilities that work nicely with Zod. So this is just an example of a login form that takes a email and a password. So we've got emails required

02:49 and password is required, yada, yada. We have our action right here that will use the parse utility from Conform. We pass it the form data and we pass it our schema. And then we get our submission back. We have this submission.intent thing. We're not going to touch on this in this exercise,

03:07 but we'll get to that later. This is to allow validation, like asynchronous validation before the user's actually submitted the form. We'll get to that later. But then we also can check whether the submission value exists. And if it doesn't, then we know there was an error. We can send that submission back and feed that back into Conform.

03:28 And then if the value does exist and we know everything is good and we can grab the pieces that we want, we can do additional actions and whatever. And if there's something else that's wrong, then we can actually add errors to that submission.

03:45 Here we're adding it to the empty string error property. That actually resembles the way that the DOM works with form errors as an empty string. And so we're saying, hey, the form has an error. It's neither the email nor the password. We're not going to tell you which is wrong. We'll just say there is a problem with your submission. So this is one of those form errors that we were talking about earlier.

04:05 And we can send that back. And then finally, if everything is good, then we redirect them to the dashboard with the sign-in and all that stuff. On the UI side, Conform has this utility, use form. And here you can specify an ID, you specify constraints. So that's like, this is where we get into HTML attributes

04:24 like required and min length and max length and type is email, all that stuff. And then we give it the submission, the last submission. So that's how we feed the error messages back into Conform so it can give us the proper errors and things. And then we have client-side validation that can happen as well, which is sick.

04:44 So we don't even have to talk to the backend to do some of our validation. Now, for a login form, all you can really do is validate that the password is the right length and potentially the email is actually an email or at least it has the structure of an email address. So basically just an at sign.

05:02 But there are some aspects of this that you wouldn't actually do on the client-side like actually checking that the email and password are correct. So you have that capability to kind of do both. It's awesome. And then we've got our form here. So Conform will take care of all of our form props

05:21 that we've got already. It will take care of all of our input props so that required and the max length and the ID and all of that stuff. It takes care of the ID for our label and even our errors as well. And including the error ID for our described by and stuff. So, so cool. We get the same sort of behavior for our password.

05:40 We can provide our own custom props that we wanna apply to the input as well. And Conform will just totally take that and it's awesome. So Conform is fabulous. And it's really, really dedicated to progressive enhancement. So all of this stuff progressively enhances. So if the user is on a really slow network connection

06:00 or spotty or something and they submit the form before the JavaScript finishes loading, you can rest assured that it is going to work. And that is just the coolest thing that we have that potential there. So lots of really cool things. And like once you have this all in place,

06:19 it's just so awesome to have validation via a schema because it makes it way easier to maintain even simple forms like this one, but like you get into complex forms and that's basically impossible. So using schema validation for that stuff, you feel so much more confident in your forms. So I'm excited for you to try this out.

06:38 I think you're gonna have a good time. Cody thinks you're gonna have a good time. So good luck.