Build a URL Shortener with Volt and Folio
This episode is for members only

Sign up to access "Build a URL Shortener with Volt and Folio" right now.

Get started
Already a member? Sign in to continue
Playing
04. Improving with a Livewire Form Class

Episodes

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

Transcript

00:00
So there's a much better way to deal with forms inside of Vault.
00:04
And that is generally true for Livewire. And that is to create a form class. What this does is encapsulate all the properties that are part of your form into one class
00:15
and allows you to validate directly from there and also perform actions directly from there as well. So this is quite a simple form. We've just got a URL state, the validation rules here,
00:25
and then we call validate. But it's always a good idea to move these over to a separate class, particularly when things start to get more complex.
00:32
It's good to move these out of the way. Now, to go ahead and do this, we want to create our form. So we can call Livewire form to create a form. Usually, you would call this something like the thing
00:46
that you're creating and then form. But you can call this create form, update form, whatever you want. So I'm going to call this URL form.
00:54
Let's take a look at that URL form really quickly. That's in app, Livewire, and forms. And as you can see, it's just an empty class that extends form. Now, inside of here, what we can do
01:04
is we can store the things that are part of our form. Now, in our case, we just have a URL. So this is pretty straightforward. And then we can go ahead and use this form in its entirety
01:16
over here. So how do we do this? Well, we can clear up our state now because we don't need that.
01:21
We can clear up these rules now because they can go within the form itself. And we just want to bring in the form function like so. So we're going to go ahead and call the form function.
01:31
And we're going to give the URL form fully qualified namespace directly inside of here and make sure we pull this in. So app, Livewire, forms, and URL form. Now, what we can do is directly call
01:45
this form validate, which will validate all of the properties that we have inside of this form. And then we can just switch over our wire model to reference form.URL.
01:56
And we can reference this within our error as well. Now, nothing is going to happen at the moment because within our URL form, we don't actually have any validation rules.
02:05
So how do we add these? Well, there's a couple of ways. You can go ahead and create out a method for this. But it's a lot easier to go ahead and use a attribute.
02:14
So you can see that this is already pulled in up here for us. So we can go ahead and add in the rule attribute. And inside of here goes a single validation rule.
02:25
So for example, required. Now, we can add multiple ones of these. So we know that this needs to be a URL as well. So we can just add these on each line.
02:34
OK, so now that we've done that, we have moved this over to a single class, referenced form everywhere instead of this. And we've added our rules to our form.
02:43
Let's check it out. And you can see it works in exactly the same way. Let's go ahead and add something that isn't a URL. And you can see it is just working.
02:52
So particularly with Vault, this is a much better way to work because you have all of your code written just within this PHP script section. So it kind of makes sense to just move this over
03:03
if you want to. Now, lastly, we're going to look at customizing the error messages for this. And there's a couple of ways that you
03:09
can do this depending on how advanced you need to be. Within the rule, you can see that the second argument is the attribute. Then we have as message on update and translate.
03:20
So we just want the message. So for the message here, we're just going to say, you need to enter a URL. And then for the URL, we can customize this to say,
03:34
that doesn't, not in capitals, that doesn't look like a URL. And of course, we can escape as normal inside of here as well. Let's check this out. And there we go.
03:46
And as you can see, we get the error messages that we've defined. Great. OK, so there we go.
03:51
We've moved everything over to a form. Let's get started now on actually getting this URL shortener working with a model that we can actually store when we've submitted this.

Episode summary

In this episode, we take a much better approach to handling forms in Livewire by introducing the concept of a form class. Rather than keeping all your form state and validation rules packed within your main Livewire component, a form class helps tidy things up by encapsulating all form-related logic, properties, and validation into its own dedicated class.

We start by generating a new form class (URLForm in our case), which simply extends the base Form class. Inside, we define the property for our form—in this case, just a url—and move the validation rules directly into the class using attributes. This makes the form cleaner, more maintainable, and easier to reuse as your app grows.

You'll see how to reference this form in your component, update your blade files to use form.url for inputs and errors, and finally, how to customize error messages for your form fields to give users clearer feedback.

By the end of this episode, we have a nicely organized form structure ready to go, and we're all set up to take this even further by actually storing our shortened URLs in the next step!

Episode discussion

No comments, yet. Be the first!