00:00 So let's say that we're building this form for a company and that company wants to be able to register users, but we only handle certain zip codes of customers. So we want them to give us a zip code, we want to make sure that it's a valid zip code, but we want to make sure that we handle it. And in order to know if we handle it or not, actually, it's a fairly complicated process.

00:18 We're going to go send that back to the server for processing. Maybe it goes and hits some microservices or something like that, who knows. But as a stand-in, we're just going to say that only zip codes starting with nine will actually validate. So let's go and first off build our validate zip code function.

00:34 To do that, I'm going to create a new file in app called validate zip code dot ts. And into there, I'm going to bring a validate zip code function. It's going to take a zip code as a string and return a Boolean. Because it's an async function, it has to be an async function in order to be a server action.

00:52 It has to return a promise to a Boolean. It's also going to do a console log to say that we're actually running on the server. Then it's going to check the format of the zip code to make sure that it's five numbers. And then it's going to validate whether that zip code starts with nine. Now you could do all kinds of async processing in here. You could hit microservices and all that sort of stuff.

01:12 We're not going to do that. But how do we make sure that this will only run on the server? Well, we could put use server inside this function, or we just could put it at the top of the file. And now we can use validate zip code wherever we want, and it will just automatically, instead

01:30 of running it locally on the client, it'll actually fetch back to the server, run it there, and return the response. Now we could do exactly the same thing over in the page. These two, onDataAction and onFormAction, could also be in their own file and has use server at the top and not be passed as props.

01:50 It's really up to you. So we'll do validate zip code. So let's go and use validate zip code. So the first thing we want to do is connect it to our schema. So we're going to add a new zip code as a string.

02:06 And now we need to bring in our custom validation. And in order to run it, we use the refine method. We simply give it the method, and then we give it the message back, which is invalid zip code. All right. Let's hit save.

02:23 And now let's go back to our registration form, and we'll do zip code. We'll say your zip code. Looks good. We'll give it a default value. All right. Let's have a look. Hit submit.

02:39 And we get an invalid zip code. Whoa. So what's actually happening? When we go back into our console, we can see that validate zip code is run on the server with that value. Let's try it again.

02:56 Let's just give it five numbers. Again, invalid zip code. There we go. You can see it actually tracking. And let's add the nine. Hit submit. And now we're getting an internal server error. So what's actually happening?

03:12 So what's happening is, well, we've added an async component to our registration schema. So this is now async, validate zip code. But we are on the page, and in this code, we are running this safe parse in a synchronous mode.

03:29 So it's got asynchronous refinements, which we are trying to run synchronously, which isn't going to work. There is a safe parse async, and we should use that instead, and then we should await it. So if you've got async elements to your registration schema, in this case, or your schema, then you want to await those. All right.

03:47 Let's give it a try. And there we go. User registered, and the zip code was checked asynchronously. Super cool.

04:03 So now you know how to make server-side custom validations using Reactor form and Next.js server actions, and how to call that safe parse, but do it safely in an async way.