So now we're able to listen to some events and we're able to validate a user's data when they input it. And that's cool. But it would be nice if we could check as a user was typing if what they're typing is valid and offer them some live feedback as they're typing as to whether the field is valid or not valid. So a little quick demo from the Mddn website. What I'm going to do is just start typing into this field right here. It tells me to type in an email address. So as soon as I start typing, it turns red. Now that to me is saying that this field is not valid yet, so it's doing some live checking as I'm typing before I even submit as to whether this is valid. As soon as I type something that is valid, the red goes away and that says to me, okay, now this is a valid value. I could submit this and it would be okay. So this is some really basic feedback, but it is useful because a user knows when a field is valid or not before they submit. So it's less likely they will submit something that's not valid. So then how can we implement this real time validation behavior into our form? Well, it's pretty simple to do that. There is an event we can react to called the Keyup event, and that's going to fire a function, a callback function every time I type something. Now, the key of event basically means when I press a key down and then lift it back up. That is the key up event. So not the push down, but the letting go the up. So let's go and try and do this. Currently we have this right here, which is the submit event. Now I want to scroll down and do a completely new event listener for the live feedback. So to do this we need to get the username field. Now we have that via the form. We can just say form dot username because the name is username. So let's grab that. First of all, form dot username, and then what we're going to do is add an event listener to this and this is going to be the key up events. Now inside the callback function, I'm going to take the event parameter. So let's pass that through. And first of all, what I'll do is console, dot log e, dot target dot value and also form dot username dot value. So these should both give us the same thing and the things that we've seen in the past. Remember E dot target gets us the target of the event. Now what are we attaching the event listener to? Well, it's the username field right here. So this thing over here, the input, so that is the target and we're getting the value from that. So that should be what our user types into it. Now over here we're again getting the form dot username and then the value. So these are just two different ways of getting the value. So I'm going to demo this, I'm going to put my semicolon there, save this. And as I start to type, we can see now two different values and they're both exactly the same. Now what I'm going to use is E dot target because I just prefer to use this when we have access to it, just in case. In the future I change the name of the form. It's one less place to change it inside the JavaScript. So let me just comment this out and then I'm going to say if and what I want to do is test in here, if the current value, every time there's a key event test, if that is a valid value. So what we need to do is test it against the regular expression Every time a user lifts the key up, every time they type a letter. So what we're going to do is take this thing right here, the regex, because we're going to need that inside this function as well. We're going to cut it from this function and then we're going to paste it up here. So we have access to it both here and in here. If we kept it in here, we won't have access to it down here because of the scope of the variable. It would only be inside this code block, inside this function. So now we have access to that, we can test it. So I'm going to say username pattern dot test, and then we're going to pass in E dot target dot value, which is the data that a user types in. So if that passes, then we'll just say console dot log and then passed for now. And if it doesn't we need an else case. So else we'll say console dot log and then failed. So let's quickly go through this again. We're attaching an event listener to the username field and the event is going to be a key up event. So every time they type something, we're doing this check, we're saying right here, test the username pattern and test it against the value they enter. If it passes, then we'll log this to the console. If it doesn't, then we'll log this. The console. So at the point where we type some kind of value, which is between 6 and 12 characters long, and it only contains uppercase or lowercase letters, this is going to pass. So let me save this and preview over here. And we can see it's failed all the way up until I type six letters. Now, if I type a number, we can see it fails again. If I go back, then we can see past awesome. So this is fine, but typically a user won't have the console open and be checking for little messages inside there as to whether they've passed or not. What I'd like to do is give the border of this input field a green border when it's valid and a red border when it's not valid. Now to do that, we'll make up two classes. So we'll do, first of all, a class over here. And this is going to be for a success and that's going to have a green border. So success. And inside here, we'll say border is going to be two pixels solid and lime green. And then also we'll have a class for error. And this will be a border of two pixels solid and crimson. Okay. So basically what we're going to do is every time this passes, we're going to apply a class of success to this field right here. And that means it will have a green border every time it fails. After a keyup event, we're going to apply a class of error to the input field instead, and that will give it a border of crimson like a red color. So let me save that. Go back to the code and we need to apply these classes. Now. What we're going to use is the set attribute method, because what that does remember is completely overwrite what is currently there, and that's what we want because if it currently has an error and then we want to apply a success class, we don't just want to add that class, we want it to completely overwrite the error one. So let us now, instead of logging this to the console, say for dot username, dot, set attribute and we'll set the attribute class to success. So now we're giving this a class of success, and down here we'll do the same thing. I'm going to grab that, copy it and paste it here. And this time we're going to change this to error. So if it passes, then we get the class success and the green border. If it doesn't pass, then we change the class to error and get a red border. So let me check this out. I'm going to come over here and start typing. Currently it's a red border, but as soon as I type six letters we get the green border. That's valid numbers, invalid letters, valid. So there we go. That's some simple live validation using this key up event. Now, I do want to show you one thing before we close out this video, and that is some different things we have available on this event object right here when it's a keyboard event. So let me console.log E just so we can see this. Now, if we come over here and I just type a letter so d then we can see this keyboard event object over here. Now if we expand this keyboard event object, we can see all of these different properties. So for example, I can see if the alt key was pressed, I can see exactly what key was pressed, etcetera. So let's do another one. Let me just come over here, keep hold of alt and press G and now we can see we get two events because we did Alt and G, but if we come down here, we can see the alt key is now true. Okay, so that's nice. We can see if the alt key is pressed, we can see exactly what other key is pressed. And also, if we scroll down, we can see things like is the shift key pressed. So that's nice. We get all of this information about what keys are being pressed when the event fires.