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
11. Clearing validation errors

Episodes

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

Transcript

00:00
The errors that get attached to our form are also modifiable. So you can set these manually if you need to. For example, if you're using a client side validation library,
00:10
you can manually set these errors directly on the form. We'll have a look at a quick example of that now. But what we also want to do is maybe when we have a validation error and we click back into the text area, we want to automatically clear this.
00:24
So it's kind of out the way, ready for the user to submit again. So let's take a look at some of the methods that we can use on our form here to modify errors. So for example, the first thing that we can do is set an error. So I could set the body error to we need a body.
00:45
And just by doing that inside of there, you can see that stuck by default, we have that error in there. So you can lean on any of these methods to control all of the errors within your form. This is basically just an object with properties in,
00:59
but Inertia gives you all of these methods so you can conveniently do that. Now, let's look at a more practical example in the context of what we're building. And like I said, when we hit this and we get an error, maybe when we refocus on this text area, we just want to clear out all the errors for this.
01:16
Well, how do we do that? Let's go down to our text area here and let's add a on focus event handler to this. And now even directly from our template, we can go ahead and clear out the errors here so we can reference the form because it's available within our template
01:34
and we can just say clear errors. That's as simple as it gets. You can also clear individual errors. So if you just want to clear a specific thing that exists within your form,
01:44
like the body, if you had other data that you didn't want to clear, you can go ahead and pass these in directly. So let's go over and try this out. I'm going to hit post.
01:54
The body field is required. When I click back into that, that then, of course, calls that clear errors method over on our form and it gets rid of it for us. Now, there are loads of other things that you can do directly within forms.
02:05
I'm not going to go through everything because now that you've got the basics, everything else is in the inertia docs, all of the specifics. So if you have any specific use cases, you can reference the inertia docs to see what else you can do directly within these forms.

Episode summary

In this episode, we take a closer look at handling validation errors in our forms. First up, you'll learn how the errors attached to your form aren't just for show—they're actually fully modifiable. That means you can set them manually, which is super handy if you want to integrate client-side validation or need more control over the error messages.

To demonstrate, we go through an example where we set an error on a field (like showing an error when the 'body' is empty). You'll see how easy it is to attach and display errors manually, and why that's useful in real-world scenarios.

Then, we make our form even more user-friendly. We add the ability to automatically clear out errors as soon as someone clicks back into the input—specifically using the clearErrors method when a text area is focused. Plus, you'll see how to clear individual errors if needed, so you don't have to wipe out everything just to fix one field.

By the end, you’ll understand how to keep your form error handling smooth and flexible. And if you want to get fancy, you’ll know where to look in the Inertia docs for even more advanced options!

Episode discussion

No comments, yet. Be the first!