Let's continue by adding some validation whenever we want to add a product variant to our cart. First, let's make sure that we wire up our properties on our Product component. In this case, we want to wire up the variant selector. To do this, we can use wire:model. And there's a difference between a regular HTML form element. Normally, you would use the name and do a POST request. Now, because we're using Livewire, Livewire does a bit of magic to do these things behind the scene, and they instead use a different term, which is model.

Livewire does a bit of magic to do these things behind the scene, and they instead use a different term, which is Model. So we can change this into Variant. Now, if we would head over to the browser and would change this, we would get an error and a little bit of a complaint. I am unable to set component data. The public property Variant is not found on the component Product. So let's switch back to our Product component, and let's make sure that we define the property here. So we'll say public Variant.

and let's make sure that we define the property here. So we'll say public $variant. And now, whenever we change our form, the public $variant property is going to be the value that is selected in the form. Next, we want to make sure that we add some validation as well. So we can add a public property called $rules, which is going to be an array. So this array accepts the exact same arguments that you would normally provide whenever you use the validator in Laravel.

So this array accepts the exact same arguments that you would normally provide whenever you use the Laravel validator. So in this case, we're going to say Variant. We want to make sure that it's required. Now, we also want to make sure that the variant that is selected does exist in the database. We could use a validation rule like so, and say exists. And now, we can reference our model. We say App\Models\ProductVariants, and we'll tell it to make sure that it has to check the ID column on this table.

We say App, Models, ProductVariants, and we'll tell it to make sure that it has to check the ID column on this table. So now, we have two rules in place. One, Variant must be required. Two, it must exist in the database. Now, in order to trigger the validation, we need to make sure that we call the validate method on our component. But first, we need to make sure that we have some sort of handler whenever we click the Add to Cart button. Let's wire up our button.

whenever we click the Add to Car button. Let's wire up our button. So we can say wire:click, and now we can find a method that we want to call. So let's say addToCar. Next, we'll switch back to our component, and we'll implement this method. So this method will now be called every time we click the Add to Car button. Now, we want to trigger the validation of these rules, and that's very simple.

Now, we want to trigger the validation of these rules, and that's very simple. We can simply say this.validate. When we would validate it, it doesn't show any errors right now because we haven't implemented this logic on the front-end side of our component. So if we switch back to our view, we can say whenever an error occurs on the variant property, we want to show an error message. Let's add some top margin, and let's set the text to 600 red.

Let's add some top margin, and let's set the text to 600 red. That should be fine. So now when we switch to the browser and try to attempt to manipulate a form, we should get a validation error. Now, what you notice is if we try to add it to the card without making a change in our selection, it says that the variant field is required, while it does look like we have a variant select.

it says that the variant field is required, while it does look like we have a variant select. So this has to do with the initialization of our component. If we switch back, we can see that our variant is not equal to any value whenever it initializes. So in order to solve this, we need to make sure that the variant is set to, in this case, the first variant on our product. So we can solve this as follows. We'll say This, Variant,

So we can solve this as follows. We'll say $this, $variant, and we're going to make sure that it's equal to the first $variant on our product. Now, as you recall, we have a getProduct method that finds our product. And this is a magic method, so we can actually simply say $this, $product, and that will give back our Product model. Next, we will call our variants relationship,

and that will give back our Product model. Next, we will call our variants relationship, and let's return the first variant, and we want the ID. Now, instead of this, we can also use a helper that Eloquent provides. So instead, we can replace this with value and call the ID. So now we switch back to the browser and try to add it to our cart.

So now we switch back to the browser and try to add it to our card. You can see that we no longer get an error message. So now let's take a look what happens if we try to manipulate the ID and whether we get a validation error whenever we try to do so. So let's open up our DevTools, and there's a Livewire DevTool extension that you can download from the Chrome App Store.

and there's a Livewire DevTool extension that you can download from the Chrome App Store. And this will list all your Livewire components. So here we can see we have our Product component, so we'll choose this. And here you can see all the public properties set on our component, and here we have the variantId. Let's change this into a random number, click Save. And now when we try to add it to a card,

click Save. And now when we try to add it to a card, you can see that we get a nice message saying, like, hey, the variant that you selected is invalid. And if we would now change it again to something else, and click Add to Card, you can see that the error message disappears because we now have provided a valid variant ID.