In this episode, we're focusing on validating our shipping form. We're skipping the pre-saved address functionality for now (we'll get to that in the next episode), and we're making sure that users provide all the required information: address, city, and postal code. We also include the delivery/shipping type to ensure it's valid and hasn't been tampered with on the frontend.
You'll see how to set up form fields using Livewire's wire:model.defer
so updates don't bombard the server with requests on every keystroke. We go through wiring up each field (shipping_form.address
, shipping_form.city
, and shipping_form.postcode
) in our form, and make sure they're properly hooked up in our Livewire data structure.
We then create basic validation rules in the component: each field is required and has a reasonable maximum length. You'll see validation in action, with error messages displaying below each input. To make error messages clearer for users, we customize validation attribute names so the feedback is user-friendly (like "Your shipping address is required" instead of technical field names).
Finally, we add validation for the shipping type to ensure the selected option actually exists in the database. We show how trying to submit an invalid shipping type is prevented. By the end of this episode, our shipping form checks all the main fields and provides solid error feedback to the user.
In the next episode, we'll move on to storing the shipping address in the database.