Learn Inertia
This episode is for members only

Sign up to access "Learn Inertia" right now.

Get started
Already a member? Sign in to continue
Playing
10. Validation and accessing form errors

Episodes

0%
Your progress
  • Total: 2h 20m
  • Played: 0m
  • Remaining: 2h 20m
Join or sign in to track your progress

Transcript

00:00
Naturally, as we're talking about forms, we really are going to need to include validation here. So how do we handle this? At the moment, we don't have any validation at all over on our comment store controller. So let's just add some really basic validation directly within this controller.
00:15
So let's pass the request in. And for now, we just have a body. So let's just say this is required, like so. OK, so how is Inertia going to handle these validation messages and where do we get them from?
00:30
Well, let's go over to the page that we've got here and hit post. You can see nothing happens. That's pretty obvious because we've just added validation in and this isn't going to get stored. Now, if we open up our network tab here and look under Fetch XHR, when I hit post, let's just see what we get back from comments here.
00:48
So I'm going to go ahead and open up the props section and you can see, sure enough, we've got an errors object with the body and the validation message, exactly the same as we would get passed down to a blade template that we could access. So how do we access this error? Well, let's return back and dump out our form at the top of this page up here and let's see what we get.
01:15
So I'm going to go ahead and just inside the form here. Dump out the form and remember from earlier, we have this errors part of this object. So if I hit post now, you can see that this is actually being attached to the form itself, which is really handy because we can reference the form anywhere in our page,
01:37
which now means we can just go ahead and grab the body out, show an error with an if statement. So let's go ahead and implement that and then I'll show you another way that you can access these if you don't want to directly access this on your form. So let's keep the form in there for reference and just underneath the text area, let's just roughly create out a div in here and say VIF form, errors and body.
02:01
So again, much like we would do within a blade template, then we want to go ahead and output form, errors and body. So let's go over and hit post and there we go. We get the error message. So what Inertia is doing here is it's taking the validation exception that gets thrown.
02:20
It's redirecting us back, but it's including them errors in the props that get sent down to here. And it's also attaching these directly to our form in the correct context. So we can access these out really easily. Again, if you have multiple forms per page, for example, if you had a form on your main page and then maybe had a contact form just below that,
02:43
what this would do is attach the errors to the correct form for you based on where you're posting this through to. So you'll always have access to the errors in the context of this. Now, if for any reason you need to access errors globally, you can also do this as well. So I'm going to go ahead and get rid of this form here and let's talk about the page special page variable that we have available on any of our templates within here.
03:10
And there's a huge amount of data inside of here, but you can go ahead and inspect that, dump it out in the console and see what you get inside of here. But we actually have props that we can access as part of this. So that's what we saw in the network tab earlier when we got that request redirected back due to the validation error. So let's just dump out page props and see what we get.
03:34
So we've got things like auth. We're going to talk about sharing data globally later. So if this doesn't make sense now, it will do later. But if we just come down here, you should be able to see somewhere in here that we have errors. Oh, yeah, it's right at the top there.
03:49
So we don't have any errors at the moment, but if we go down and we post this, sure enough, the errors are included globally. So what you can do if you need to, and really, if you have one form on your page, you can go ahead and just access the errors and the body. Now, I don't really see a reason to do this, but if you do for any reason or you need to watch on this data, you can use that as well. OK, so we've implemented validation.
04:16
Let's really quickly style this up. We can do this in exactly the same way as we normally would. So let's set the text to small and the text red to 500. And that's it. We've implemented validation nice and easily.
28 episodes•2 hrs 20 mins

Overview

Single-page applications are great, but they come with the challenge of maintaining two separate projects — the client and the API.

Inertia serves as the solution, seamlessly connecting these two components and enabling you to build everything in one application (a monolith) while achieving the same outcome. The best part? You won't have to create an API.

To be honest, when I first started working with Inertia, I was a little confused about how everything worked. If that sounds familiar, then this course is made for you. I'll guide you through everything you need to know to kickstart your journey in building single-page applications using Laravel, Inertia, and Vue.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Comments

No comments, yet. Be the first to leave a comment.