OK, let's go and talk about validation and get this form validated.
00:04
At the moment, we are just blindly passing in the title and the author to this book create method when we create a book, which is obviously not good.
00:13
Now, there are a few different ways that we can actually validate within Livewire. We're going to look at what's more specific to Livewire 3, and that is using attributes.
00:22
Now, notice when we created this book form, we have this rule already imported for us. Now, what this allows us to do, this attribute, and it's a PHP attribute, is just apply this into here.
00:35
So if you've not worked with PHP attributes before, this is what this looks like. It basically applies some behavior to this property. So we use a hash and then square brackets,
00:45
and then we just invoke this rule, which we've already had imported up here. So what this will allow us to do is just pass in the validation rules that we need.
00:54
It's that simple. That is now validated, and this will not do anything unless this is filled. So I'm just going to take this basic rule
01:03
and do this for both title and author, and let's see what happens. And this might not be what you expect based on what I've just said.
01:11
So I'm going to go ahead and just not type anything, and I'm going to hit Submit. So we've actually ended up creating a completely empty book with no author here, but I said these actually validate.
01:22
Now, this is a way to apply the validation rules for the properties that you are using here, but it doesn't actually validate this for you. So to do this, what we need to do
01:31
is head over to our bookend index, and before we submit this, actually call the validate method. So we're doing this on our form object now,
01:40
but you can do this directly within any class within or anything within LiveWire, any component within LiveWire. But in our case, we want to specifically do this on the form class.
01:50
So if we still have these title and author properties up here, we could just call this validate, and it would work in the same way. OK, so now that we've done that, let's just
01:58
get rid of that from the database because that's going to be a bit weird. Let's try this again. Hit Submit.
02:06
Nothing happens. Let's try it again. Nothing happens. So I cannot submit this form.
02:11
The validation is now taking place. So the question now is, how do we get the validation messages out of here? Well, it's exactly the same way as you
02:20
would do this within Laravel itself and within Blade. So over in the book index, we can do this under each of the inputs, or we can iterate through a list of messages.
02:31
But more conveniently, we can use the error directive within Laravel. Now, we need to reference form.title. Don't make the mistake of just referencing title.
02:41
Remember, this exists on the form object now. And then within here, we can just output the message. We'll do that to test it out, and then we'll style this up very quickly.
02:50
So if I hit Submit now, there we go. The title field is required. It's working as we would expect. So I'm just going to set this to item start,
02:58
just so that looks a little bit better. There we go. And we've got our validation messages in here. Great.
03:05
OK, so now that we've got this done, let's just style this up very, very quickly. It's a little bit janky in the way that it works, but it's absolutely fine.
03:13
We're here to learn about Livewire. So let's say text red 500. And I think we'll just leave it at that. So I'm just going to duplicate this down.
03:22
I'm going to add it under the form author, and that's it. We have implemented, if we just wait for that to refresh, we've implemented validation. OK, I'm also going to add a margin on the top
03:35
here, just to separate that out. And let's just double check that. There we go, great. So validation is working, but we want
03:45
to dive a little bit more deeply into this and figure out how to customize validation messages and all that kind of stuff. So let's go over to our book form
03:54
where we're using our rules here, and let's take a look at how we can tweak this to how we want. So the traditional way that we would do this in Livewire, and we can still do this.
04:05
There's nothing wrong with doing this at all, and this is helpful if you have any kind of dynamic messages, error messages that you want to use, is just define and override the messages
04:15
method of the main class here. And then we just return this, much like you do in Laravel if you're customizing error messages. You give the name of the thing, and then the validation rule,
04:28
and then you just give an error messages. So please enter a title. I'm just going to put custom in here, so we can see that this is custom.
04:36
And then we want to do the same for the author as well. Please enter an author. So just with that messages method implemented, and a list of these customizations returned,
04:46
we now have them custom error messages in there. So it's as simple as that. But if you didn't want to do this, so let's go ahead and just comment this out.
04:56
In fact, I'm going to go, yeah, no, let's delete it. So if you didn't want to do that, you can do this directly within the rule, the way you've defined the rule.
05:04
So for example, another thing that we can pass through to here is the message. So let's go ahead and say message. Please enter a title.
05:16
And we can do the same for this one. Please enter an author. Let's go over. There we go.
05:24
So we get the same thing, but it's a little bit neater being defined directly within this attribute. And you can do a bunch of other stuff in here as well.
05:32
You can specifically name the columns. So when you reference them within your error messages, it gives you that name of that column. So for example, this is the title of the book.
05:42
So we could say title of the book, and we could do the same thing for this one. Author of the book. And then we could say the message is attribute,
05:54
which will reference what we've defined as is required. And we could do the same thing for this as well. So let's just pull this down to here. So there's a bunch of customization options
06:07
that you can apply to this. Based on the column or the thing that you are actually validating and the message itself. So now you can see we get title of the book,
06:17
which is what we defined as as, and then we get attribute, which gets replaced and is required. So there's a bunch of things you can do here
06:26
to validate these. Now let's talk about multiple validation rules. So obviously we know that at some point we're gonna have multiple validation rules.
06:35
We just do these on the next line. So in this case, let's say that we wanted a minimum of 20 characters. We'll get rid of the message and as
06:43
just to give you an example of how this works. If I were to go over here and enter Alex and or a book by Alex, that's not gonna pass
06:53
because the title must be at least 20 characters. So you can add multiple validation rules, just separate these on different lines and you can just customize each one of these as you need.
07:03
So that is very basic validation. There's a ton of other stuff that you can do as well, but this will get you the majority of the way unless you have a very specific use case.
25 episodes•2 hrs 52 mins•1 year ago
Overview
Ready to learn Livewire? Throughout this course, we’ll build up a real application that touches almost every aspect of Livewire — leaving you ready to start building your own applications.