This episode is for members only
Sign up to access "Installing Inertia from Scratch" right now.
Get started
Already a member? Sign in to continue
Playing
12. Handling validation
Episodes
01. Inertia from scratch
02. Enhancements
03. Server-side rendering (SSR)
Transcript
00:00
Let's look at adding some basic validation to the form we've got here. We're not even validating this in the controller yet. So let's go ahead and add some really simple validation to validate this body. We'll pass the request in and we'll go ahead and set the validation
00:14
rules specifically for the body here. Just fix this up real quick. And we're going to just say for now that this is required. And that's just about it.
00:24
Okay. So if we come over here and hit post, this validation is of course now preventing this from even being stored. It wouldn't work anyway, because body is not nullable, but we are
00:34
getting validation errors through. Now we can inspect these over in the network tab under fetch XHR. If we hit post, you can see that we're redirected back to this page here. And what we actually find is the props, the global props that we get back
00:50
actually now contain all of the errors for our form. So we can actually use these to display the errors on the page, as well as Ziggy stuff that we've seen before. So this is just shared between this component.
01:03
So how do we access these errors? Well, we can access them globally. So for example, over on our index here, we could go ahead and say, define props. And we could accept in the errors here, which is an object.
01:19
So we could dump the errors out on the page here somewhere just to demo this out. And let's go over hit post and there we go. We get them errors. So we could easily just read them in if we wanted to.
01:31
What we can also do though, is access these errors directly from the form. So let's say form dot errors, and we'll go ahead and get rid of where we've defined that error prop out. So if we now hit post, you can see that we get exactly the same thing.
01:45
Find this a little bit more convenient because if you have multiple forms on a page, it's a lot easier to reference these directly within this form. And it just makes it a little bit easier because you don't need to define out the prop that you're getting through.
01:57
So what we can now do is just add a really simple if statement down here. So for example, we could add in a div, the if, and we could say form dot errors dot and body. Then we want to display the error out in here.
02:11
So we can display out form errors and body. And we can even give this a class, maybe text red 500. So let's go over and hit post. There we go.
02:24
We get the error through. And of course we can just update this to hit post and submit this through normally. If we do submit this now, because we are making another request to that controller and we don't have any errors any longer, what we should see is the
02:39
validation errors disappear because the next request that comes in, that has actually successfully stored that in the database. Now, once again, we've still got some work to do because at the moment, it doesn't look like anything's happening.
02:51
What we're going to do specifically next in the next episode is look at what happens in the aftermath of a successful form submission, how can we change this to show a message, clear the form out and whatever we need to do, let's take a look at that in the next episode.
14 episodes•1 hr 7 mins•1 year ago
Overview
The Laravel ecosystem gives us packages like Laravel Breeze and Jetstream which come ready set up with Inertia installed. But what if you want to install Inertia from scratch and build your own features on top of it?
In this course, whether you're new to Inertia or not, we'll be covering getting Inertia set up on a completely fresh Laravel application. We'll walk through some nice additions like server side rendering, styling with Tailwind and installing Ziggy for named routes.
To finish off the course, we'll build a simple app where we can post comments to a timeline, to bring everything nicely together!
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Comments
No comments, yet. Be the first to leave a comment.