This episode is for members only

Sign up to access "Learn Livewire" right now.

Get started
Already a member? Sign in to continue
Playing
09. Real-time validation

Transcript

00:00
All right, let's have some fun with validation and introduce real-time validation into our title and our author. Now, this kind of doesn't make sense for a title and an author because we don't really have many validation rules here.
00:12
We don't want to impose any limits or anything like that. But let's just take a look at how this works. And then you can, of course, go ahead and apply this to any of your other projects. So I'm going to bring back this minimum rule.
00:23
So I'm going to bring back a minimum of five for each of these. Now, we know what's going to happen here. We know how the validation works. Now, if I type A and A for each of these, we get an error for each of them.
00:35
But what if we wanted to let the user know that the validation has failed before they go ahead and click submit? How would we do this? Well, in this case, what we do is there's a couple of things that we can do. Over in book index, we could set this to live.
00:53
So we know that this is not a great idea because for every single character that we type into this input, it's going to send a network request. Not the best idea. But let's try this out. So I'm going to go and set this to A.
01:06
And you can see, sure enough, already, because we have them validation attributes over here on our book form, these are automatically being validated for us. And then we get the result through to the front end. So I can do the same for this as well. Type B, and already this is validating for us.
01:25
Live is not a great idea. There are circumstances with real-time validation where you might want to use the live modifier. But in our case, we don't really need to do this. So another modifier that we can use is blur, which is when we sort of go away from this field.
01:41
And this is typically how real-time validation works. It's pretty annoying for a user to just type a character and have it validated instantly. It's kind of jarring. So what we can now do is type ABC, which is obviously less than five.
01:56
And I'm either going to click or tab over to the next field. And you can see already the title field must have at least five characters. So this is a much better way to introduce real-time validation. And also, we're not making that many network requests here.
02:09
When we go over to here, it's just making one request every time we switch over to a new input. So let's go ahead and say a book by Mabel. Just keep this really simple. Hit Submit.
02:23
We know that's valid now because I've blurred away from this. And the validation message has disappeared. And I can hit Submit. That's created.
02:30
And our form is cleared out. So that is real-time validation and the kind of difference between using blur and live. Blur is what you'll use most of the time. But if you desperately need to use live, you can go ahead and do that.
25 episodes2 hrs 52 mins

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.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!