Hi everybody. We've seen how to use HTML five, attributes, and input types to really try to validate the inputs people can put into their forms, but that's not always gonna be enough. One, we've seen that a lot of browsers don't support all these types, so you can't always depend on them. But two, there may be situations that go beyond what these tags and attributes can do for you. So, in this video, we're going to do an example where we want to check that the two email addresses that are input Match exactly. So let's go ahead and see how we're going to do that. One of the things I mentioned is right from the start, you wanna think about what exactly is it you're trying to validate. In this case, we're trying to compare that two emails are the same. How are we going to do that? Well, it's going to be a little bit more complex. We'll start with the HTML. We can use the email input type and the required attribute to kind of get us started. But then we want to add some JavaScript. And that JavaScript is going to be in charge of making sure those values are actually the same. The last question that we didn't think about before, is when do we want to do this? We're going to use these API events that are linked to the DOM to decide when we should run our JavaScript. In this case, lets go ahead and validate as soon as that second email is entered. So we decided we want to validate at input time, but that still doesn't tell us which event we want to use. Two options are oninput and onchange. Either one of them will react every time you type into the email form. But oninput is going to check every single time you type in a character, and we probably don't want that. We want instead to use onchange because that will wait until we're done typing in the email address and have hit tab or enter to leave that field. Okay. After we decide which event to trigger on, we need to decide what is it we're going to compare. Because in JavaScript, when we talk about the different elements, it rarely is that it's as simple as just some text. So, is it the inputs that you wanna compare, or some attribute of those email inputs? Finally, what's our output, what is our goal? We need to let the user know. And communicate the result of when we did our check. So here's our kind of goal. This is what we wanna look for. I have a field that has two email input types one and two. And right here they don't match. When they don't match I'm gonna generate a java script alert that let's the user know, no we really need them to be the same. So, let's look at the actual code. All right, so on our left here we have the HTML code that we need. I just have my two input types. They're both email. And I included my required. What's different is that on my second email type, the one that matches down here, I have an on change equals check. This is responsible for calling the JavaScript code that's going to say hey, I need to make sure these two things match. The other thing that's really important about this HTML code is that I've included IDs. So I have ID equals email address and ID equals email repeat. This is how JavaScript is going to identify who's who. Alright. Now let's switch over to the JavaScript code. I'm going to take a few extra steps just to try to make everything clear. I've created two variables. Email one and email two. And I used document.getelementbyid in order to grab those values. If by any chance you've reached this point and you don't follow what's going on with these two lines of code, I actually recommend that you stop, go back, and review some of the earlier things. If you are okay with this idea, great, let's move on. Your first stop might be, we need to compare email one to email two, and then we'll know. Not exactly. You have to remember that when JavaScript makes the DOM, this maybe email one and this maybe email two, but it's not the whole node we wanna compare, right? We don't care about background colors or things like that. What we care about are the actual values. That are stored in email one and email two. So we have this line of code. If email one doesn't equal email two, then go ahead and send up that alert that says, hey the two emails must match. Let's see if it works. I have me and me.com. I'm gonna put in me at me2.com. As soon as I'm about to tab out of here, I'm hoping to see my JavaScript alert. Great, it worked. It said the two emails must match. Before I go any further, I'm gonna do the smart thing, and make sure I don't always get that alert. Tab out. Great, it didn't happen, Now, this works exactly the way we planned it out to work. But that doesn't mean we planned it out the right away. I'm gonna click on confirm emails now. And you can see that it let me get away with that. So let's think about what we need to change. When you check on inputs, it can be the case that, while everything's worked, it didn't really have what I call teeth. It didn't make anything happen. So how can we actually stop the form from being submitted if the values aren't correct? Well, we need to rethink our plan. The what was okay. The how was okay. And the when was kind of okay, but we wanna add a second way to do this as well. We also want to check on the submit. So let's look at that code. In the new version of our code, I've added something to the submit button. I went in and I added a onclick="return check();". So there's something new that you haven't seen before. It's the idea of the return value. And it says hey, don't just run this function, I need to know did it return true or false. Then, I went over here and I added an additional line of code to our JavaScript. It says go ahead check all the same things and still do that alert, but in addition, after the person hits okay I need you to return false. So for you only to be returning things two times, we'll run this function it'll go through says they didn't match, I'm gonna return the word false over here. [SOUND] And whenever input type sees a false it knows I've gotta stop. I'm not allowed to do what it is I'm trying to do. So let's take a look if this works. I have the me and the me two. And, now, when I try to confirm, it won't let me. It won't let you hit that submit button until you get it right. So what is return? It's something we're gonna get into in a future lecture, but for right now you just need to know that every function can return values. Whether they're Numbers, Strings, Booleans, Objects, Arrays. When we do form submission, we tend to stick with the Boolean, where we're saying, you know what? We need to stop this. And when we do that, it's going to stop whether it's a submit, or a link, or any type of HTML five tag that has an action associated with it. So I hope from this lecture you got the general idea that it's more than just knowing how to code, you have to be careful about what you're comparing and when you're comparing it. Even though it can be tricky, JavaScript is still a great tool for verifying the input. And, it's a great language to know, no matter what you're doing on that front end development. But really what you need to make sure you're doing is creating the most basic forms before you go in and try to add this JavaScript interactivity. It's going to make your life much easier and it's always gonna create better, cleaner code. Thanks.
