Alright, so in the last episode, we got the happy path for creating a User up and running. But now, of course, we need to handle failed validation. Okay, first up, let's add a little link here to create a User. So we'll visit user/index, and yeah, there's that h1. So why don't we add our link here, and that'll go to user/create, right? And we'll say new User. Okay, why don't we make it blue? And if we have a look, yeah, maybe it's a little too big, and it should go right over here. Okay, let's make it smaller, and then I'm going to wrap this whole thing within a div, reformat. And then on this wrapper alone, we'll make this a display of flex, align it to the center,

Okay, let's make it smaller, and then I'm going to wrap this whole thing within a div, reformat. And then on this wrapper alone, we'll make this a display of flex, align it to the center, and then we probably need to push this away from the heading a little bit. So maybe margin-left of 2. Alright, how's that look? Yeah, pretty good. Maybe 3, and you know what, it's fine. So now we at least have a link to create a new User. Okay, so think about it. If I now switch over to user/create, we have some automatic browser validation,

Okay, so think about it. If I now switch over to user/create, we have some automatic browser validation, and that's because I added this required attribute. So what this means is it physically won't let me submit the form or trigger that submit event if I haven't filled anything out. Have a look. And that's useful, but again, remember, you can never exclusively depend on browser or client-side validation. You still have to do that second layer of validation on the server side. And that's because, of course, the user can always bypass the front end entirely. So for things like this, they are nice to have, they're little helpers.

Submit. And we did make the request, but we got a 302 redirect back to this page. Let's see. We made our POST request, we didn't send any relevant data through, and then we got a redirect response. But notice now, because Inertia will automatically share the errors, we can see that the validation failed. The name is required, the email is required, the password is required. So it looks like everything is rendering properly, we just have to conditionally display the errors. All right, let's do it. What if we add it to start, maybe right down here? I might say, v-if, and how do we look into those errors?

What if we add it to start, maybe right down here? I might say, vif, and how do we look into those errors? Well, I'll show you two ways. First, we can look into the page component, into the props, into the errors, and then look for an actual property name. So page.props.errors.name. So if that's not empty or null, then let's set the text equal to that. Then we'll set a class of maybe red and extra small, maybe italic, whatever you want. And actually, maybe we should also push it down from the input just a little bit. Okay, let's give it a shot. So one more time, I refresh, I submit it, and now we have feedback.

That's what we want. So why don't we set it up where the name passes? There we go. Now only these two fail. Let's make that pass as well, and everything is working just the way we want. Okay, so that would be fine. Another way, if you don't want to reach into the page component, which I don't see any issue there, but you could also declare it as a prop. So again, we're using the composition API, so we would do defineProps, and I could accept the errors here. So now we sort of have access to them locally. That would allow me to then replace every occurrence of page.props.errors with simply errors, like that.

So now we sort of have access to them locally. That would allow me to then replace every occurrence of page.props.errors with simply errors, like that. It's up to you. Come back to Firefox, refresh, give it one more shot, and it still works. Okay, so now, yeah, the best of both worlds would be to have some automatic browser validation right there and here. But then, of course, you have server-side validation on the backend. So you have two forms of production. And if that does fail, then we redirect back to that page, Vue will automatically re-render it, and in those cases, will display a little bit of feedback to the user. All right, but we're not yet done with forms. In the next episode, let's have a look at Inertia's Form Helper, which is even cooler.

All right, but we're not yet done with forms. In the next episode, let's have a look at Inertia's Form Helper, which is even cooler.