Since we are talking about properties and their data, we need to spend a little bit of time talking about validation, because the same rules apply. Never trust user input. Now a couple of things. We will be talking about validation again later on, but for right now we're just going to cover the basics. And the basics are, well, this is Laravel, and you're not going to be surprised about any of it. Okay, so the first thing I want to do is change this a little bit, because whenever we submit our form, we're calling this changeName action, and I want to change this to changeGreeting.

Okay, so the first thing I want to do is change this a little bit, because whenever we submit our form, we're calling this changeName action, and I want to change this to changeGreeting. Because I want to actually do something whenever we update the page. I want to change the greeting. So we are going to have a public property called greetingMessage. We're going to initialize it as an empty string. But inside of changeGreeting, we will change its value, and we will do so just like what we did inside of the Vue, except that, well, we'll just do it here. So we will have our greeting, then we will include the name, and we need to be excited about this.

So we will have our greeting, then we will include the name, and we need to be excited about this. So we'll have an exclamation point, which means that inside of our Vue, we need to output this greeting message instead of the greeting and the name. And we also need to check to see if we have a greeting message before we display it. So let's do a sanity check. Let's make sure that this works. We'll say, howdy, Jeremy. And sure enough, except that that's howdy, Jeremy. You have an extra exclamation point.

And sure enough, except that that's howdy, Jeremy. You have an extra exclamation point. Let's get rid of that. All right. So we want to validate our form, and ideally, we would validate both the name and the greeting because that is user input. However, let's just focus on name because that makes things a little bit easier. Of course, we would apply the same ideas to anything that we wanted to validate. We're just going to make it easy on us this time. Okay, so our name property is what we want to validate.

We're just going to make it easy on us this time. Okay, so our name property is what we want to validate. So we can do this in a variety of different ways. The first way is to call the validate method inside of our action, and then we will pass in an array where the keys are the names of our properties, and then the values are the rules that we want to apply. As I said, this is Laravel. This is not going to be a surprise at all. So now whenever we submit the form, nothing happens. If I have a single character for a name, again, nothing happens.

So now whenever we submit the form, nothing happens. If I have a single character for a name, again, nothing happens. If I have two characters, then we should see our message, and we do. Howdy, Beau. If I clear this out and submit this again, once again, it doesn't work. But notice, though, that our greeting message did not change, and that makes perfect sense because if we look at the changeGreeting method, yes, we are setting a value for greetingMessage, but only if the name passes validation. So really what we need to do is every time we call changeGreeting, we need to reset the greetingMessage to its initial value, which we can do very easily by just setting

So really what we need to do is every time we call changeGreeting, we need to reset the greetingMessage to its initial value, which we can do very easily by just setting it to an empty string, or we can call a method called reset, and then we can specify the name of the properties that we want to reset. In this case, it's just one. It's greetingMessage, and that's going to give us the behavior that we would expect so that if we have a name that works, we will see the message. Otherwise, we will not see the message. That's great. Now we need to see the error message.

That's great. Now we need to see the error message. We need to know why our message isn't displayed when validation fails. So I'm going to add a validation message between our inputs and the button. It's not going to look great, but it's at least going to be very apparent, and we can do that using the error directive. As I said, this is Laravel. So we want to display the error message. So now whenever we submit the form, we can see that the name field is required. If we supply just a single character, the name field must be at least two characters.

So now whenever we submit the form, we can see that the name field is required. If we supply just a single character, the name field must be at least two characters. Great. We can now validate our data. But this is just one way. There are others. So if we go back to our class, let's say that we don't want to define our rules here, but instead, we want to define them inside of a method called rules. I don't want to sound like a broken record, but this is Laravel. So here we have a method called rules.

I don't want to sound like a broken record, but this is Laravel. So here we have a method called rules. We return an array where the keys are, well, we all know what this is. This is how we validate data in a typical Laravel application. So you would expect whenever we go back to the browser and we submit the form, once again, we see the same result. The validation fails. So therefore, we see our validation error message. But whenever we have a valid name, we see our greeting message. Everything is working fine.

But whenever we have a valid name, we see our greeting message. Everything is working fine. So we can call the validate method passing in our rules, or we can define our rules inside of a method called rules and still call the validate method to validate that. But there is another way. We can use an attribute called validate. This comes from Livewire attributes, and all we have to do is supply the rules. So our name property is required, it has a minimum length of two. And I like this approach because it's very clear. This is the property.

And I like this approach because it's very clear. This is the property. These are the validation rules for that property. I like it. It also has the side effect that Livewire will validate that property for every update. So if I come to the browser and I have just a single character here and I click on greet, we see that the name field must be at least two characters. And so it validated that value, but also notice what happened here. We have a greeting message. Now if you think about it, this makes perfect sense.

We have a greeting message. Now if you think about it, this makes perfect sense. Because if you look at the changeGreeting method, we are setting a new value for greetingMessage. We are taking the value from greeting and the value from name and creating our greetingMessage. Nowhere inside of this method does it say to not do this if validation fails. Now yes, I commented out the line of code where we actually validate, but I wanted to point out that Livewire is going to automatically validate properties if you use the validate attribute.

point out that Livewire is going to automatically validate properties if you use the validate attribute. That doesn't necessarily mean that it's going to stop the code from executing if validation fails, but it will validate it. Now you can tell Livewire not to validate on update by passing that argument. The value needs to be false. In which case, if we submit this, we will see that it no longer validated that on the update. In which case, you would definitely need to call the validate method. But I would make the argument that you need to call the validate method anyway.

In which case, you would definitely need to call the validate method. But I would make the argument that you need to call the validate method anyway. Because 99% of the time, that is the functionality that you want. So if I comment out validate again, we see that it validates the data, but it still executes the code inside of our changeGreeting because, well, we didn't tell it not to. In which case, we would have to explicitly say to validate our data. And then we will get the behavior that we would expect. It will validate, and if it fails, it will stop executing that method. So those are the basics of validating your properties inside of your Livewire components. It's very similar to what we would do in a normal Laravel application.

So those are the basics of validating your properties inside of your Livewire components. It's very similar to what we would do in a normal Laravel application. You can call the validate method, pass in an array where the keys are the property names and the values are the rules that you want to apply. You can create a rules method like you normally would inside of a FormRequest class that contain, once again, the names of the properties and the rules. Or you can use Livewire's validate attribute. And while Livewire will automatically validate the properties that use the validate attribute, we will typically always want to call the validate method anyway.

we will typically always want to call the validate method anyway.