00:00 So far, we've got two different ways to send data to an API endpoint and validate it. And we've taken a look at one server action way to post data to the server. I'm going to give you a second server action way, and I think probably save the best for last. All right,

00:17 so here's what we're going to do. Instead of sending the schema, like we did the last time with the data, with the first name, email, and last name, we're going to send form data to the server. And this has an advantage that the others don't. All right, let's get into it. So the first thing we're going to do is I'm going to go into page and I'm going

00:35 to create a new form action. So I'll just copy and paste data action and change the form action. And instead of the schema, we'll instead do form data and we'll call that form data. And again, we need that object from entries trick to convert form data into data.

00:55 And yeah, that, that's it. So far. So let's go send that onto our registration form component. And now we've got to go and alter registration form. So we get that. So we'll just copy paste this

01:11 and we'll copy paste this and we'll use form data here. Now down here, let's go and copy and paste this out. And then we'll comment that.

01:28 So now I have our different methodologies. This one, we need a form data. So we're just going to go and copy paste like that. And that'll give us form data. Instead of data, we use form action instead. Okay. So sure. That's one way to do it. Let's go to try and see what works.

01:48 Okay. We'll open up a console, hit submit. And there we go. User registered. All right. Now you could do it this way, but there's an easier way to do it.

02:06 And it has the advantage that it works without JavaScript being enabled. It's super cool. Let's go back into our code. And I'm going to bring in use form state from react dom. Okay. And that's going to manage our form state. So let's go and use that.

02:25 So use form state takes the form action as the first argument, and then it takes the initial state. In this case, I'm just going to say that that's going to be message and then nothing. And this gives us back a state and a form action.

02:43 Now the red squiggly issue with on form action is that it's API is wrong. First thing you get is a previous state and that matches whatever the state is that's coming out of the other side.

02:59 So now let's go over into our form and let's make that the API. All right. Looking good. So now we're going to take that form action and down here in our form,

03:16 we want to add an action and set that to form action. And then above the form, we're going to display the message. If this message exists now, we're not going to do the submit in here. We're just going to let the action do the submit. All right, let's try it.

03:33 All right. So our validation is still working. And we hit submit and nothing happens. So let's remove for the moment, the validation by getting rid of the on submit. Now let's give it a go. Oh, interesting. Okay. So now we get, you hit submit and we get invalid data.

03:53 That's actually coming from the server. Awesome. Because our server action over here gives us a message back of invalid data if it doesn't actually pass our validation. So this is really cool, but we want the validation back. So how are we going to do that validation? Well, what we can do is we can get a reference to this form.

04:13 So bring in use ref from React. We'll create a ref for the form. We'll set that reference. And then in our on submit,

04:31 instead of calling on submit, we can simply give it a function that says that we will call on form ref current submit. So if handle submit works, it's going to call this function.

04:49 That function is then going to call the legit submit on form, which is going to trigger our form action, which is going to send our data. Let's see if it works. All right. So let's hit submit again. Now we get our validation. Let's go and complete our validation.

05:04 Hit submit. And there we go. User registered. And that works just fine, but even cooler. Let's go and disable JavaScript. Hit refresh again. And now we hit submit and no,

05:24 we don't get the client side validation because that all depends on JavaScript, but we do get the server side validation. So remember I said the client and server side validation are really important. Here it is. It's not just about data integrity and security. It's also, if you have JavaScript disabled like this,

05:40 you can use this whole mechanism and still and still get invalidation and the whole thing. It's fantastic. In the next video, I'm going to show you something that is possibly arguably even cooler. It's server side field validation. I'll see you in the next video.