Learn Livewire
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

Episodes

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

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.

Episode summary

In this episode, we jump into the world of real-time validation for form fields, focusing specifically on our title and author inputs. While these fields don't necessarily have strict requirements, we add a minimum length rule just to see real-time validation in action.

First, we see what happens if we try to validate as we type by using the live setting. This instantly shows validation errors with every character entered, but we quickly realize it's not the best user experience (or network usage), since it sends a request on every keystroke.

Next, we try the blur modifier for validation—this means the input is only checked once we move away from it (like clicking to the next field). This feels a lot smoother for users, since they're not bombarded with messages while they're still typing. Plus, it's more efficient!

We set up the minimum character rule, try out both validation approaches, and walk through submitting a valid entry. By the end, you'll have a solid grasp on the difference between real-time validation via live and the more commonly used blur, and you'll know how and when to choose each one for your forms.

Episode discussion

No comments, yet. Be the first!