>> Okay, everybody. Let's talk validation. Before we can validate input, we need to think ahead. We need to think what is it we want to validate on our form or on our page. And after you decide what you wanna evaluate, you have to decide how are we going to do it? Because we always have a few different options. So, let's talk about what we might want to validate. One option is the type of input. Is it important to you that you get a number instead of a string? Or the format of the input. If you're asking of an email address, do you wanna make sure that the ampersand is in there and that the dot? Or for the url, is it particularly important to you to have that www or that http? Sometimes with phone numbers, people have very strict requirements at how they want people to enter those numbers. Should you have spaces, parentheses, different things like that. Finally, the value of the input may be what you're trying to validate. Should it be required? Do you want the person to have to put it in? Do you want to check to make sure that two email value match? These are the type of things I'm talking about when I say what to validate. When we talk about how we want to validate, here's where it can get a little bit more interesting. One option is to just use the new HTML5 input types. So, email, number, url. They can actually force the person to type in just what you want them to put in, and nothing else. You can also use HTML5 attributes. So, required, placeholder. These are the things we'll cover in just a few minutes. The third option is to use custom JavaScript functions, code that you're going to write to make sure that they're entering only the information you're expecting. So, let's start with those new HTML5 input types. The input types require that the browser validate the input. Not you. So, you're putting it all on Chrome, Firefox, Edge, whatever it is you're using. When they're supported, it will actually keep the browser from being submitted if it's not valid input. How it tends to work is it'll find the first thing that doesn't meet the rules and it puts it into focus. So, when it highlights that one it says, nope, you can't go any further. If it's not supported, then the input type just falls back to a plain text field. Let's look at our early example of all the different input types, and I'll show you what I'm talking about. So, I've gone back to the form we used before. And I've gone ahead and I've put in some values for each of the different input types. I have Colleen, me, passwords, all those little things like that. Now, because I used the email input type, this should fail as soon as I hit click here. Great. There you go. The browser, this is Chrome, said nope, you need to have that ampersand and a dot to make this work. No problem. I'll go ahead and put it in. And once I've done that, I'm gonna go down here to click here again. And the next thing it found that didn't fulfill that input type is now highlighted, or in focus as we call it. So, I can make this 3. The last one I'm gonna click on is, it says sorry, this is not a valid URL. It's requiring me to put in http before we do that. So, now when I click here, it's going to hopefully just refresh and we've submitted the form. But just as a reminder, when I said this last bullet here but if its not supported, and the input type is just text, that means in some browsers using the email tag, or the number tag, or the URL tag, it doesn't guarantee valid input because maybe the browser just doesn't support it. So, another step we can take instead of just using input types is to use input attributes. These are just additional attributes that tell the browser additional information. The required attribute essentially says, hey, you can't submit this form if this particular input field is empty. So, if you want someone to put in their password, you're going to include required. Otherwise, people could just leave it empty and they could submit the forms without adding their password. This can cause some issues when you're developing your code, because what people tend to do is they put required in a lot of the different fields. So, let's think about the form we just looked at where I had 10 or 11 input fields. It's going to be super annoying when you're testing your code if you have to fill in all 10 every single time. So, it is possible to overwrite the required field with a special attribute called novalidate. So, if I were to include in my code form, my form tag, no validate it will ignore all of the required attributes. It seems a little silly, but as you start programming you're gonna be really glad you know about this. Because it lets you test sometimes, and not test other times. Another attribute you can use is called pattern. Pattern only works with the input type equals text. And what it does is it forces the user to use a specific format when entering their input. So, for instance, you might say you can only enter in numbers and there has to be five of them. Or you can only enter numbers but there needs to be between 13 and 16 of them. Where did this weird example come from? Well, this is actually the pattern for credit cards. You may want people to only be able to enter in characters. So, for their user names you might not want them to enter in numbers or spaces or things like that. So, this right here says you can enter in lowercase a to z, upper case A to Z. And this plus means and there has to be at least one character. Now, these are called regular expressions. And they can be a little bit tricky to figure out on your own. But that's okay because you don't need to. Usually, what people tend to do is they combine their patterns with a place holder and supporting text to let people know, hey, this is the format we have to use. But then, when it comes time to come up with these special expressions, you go to a website such as html5pattern.com. If you go there, there are people who have spent way too many hours of their lives coming up with all the different combinations you could ever think of. So, don't worry about creating the patterns. Just practice using them right now. Another way that you can kinda validate the input is by limiting your number to only certain inputs. You can use min, max, and step to say, you know what, you can't enter a number that's less than three. You can't enter a number over 100. And step means you can only enter in in increments of five, or increments of ten. The range attribute that we saw earlier does the same thing. You by default put in a max and a min. The only difference is that instead of typing in a number, you use that little slider to move things back and forth. Okay. So, let's put some of this into practice. We're gonna do an example of where we want to enter an American zip code into one of our input fields. So, if we want to do that, we need to decide what it is we need to check and how we want to check it. So, what do we want to check? We want to make sure that we have a five digit input. All right? How are we going to check it? We pretty much have two options. We can either use the input combined, input equals number, combined with a min and a max. Or we can use input equals text and combine that with a pattern. So, let's go ahead and look at an example where I've used both text equals input and text equals number. In my first one, I have type equals text, and I have my pattern that says I need digits between 0 and 9, and there should be five of them. Just to make my life easier, I've made both of these required. In my second example, I have input type equals number. And I have a min of five zeroes and a max of five nines. That's kind of trending keep it within five digit idea. So, let's see what happens when I type in some values. Do they both work? Does either one work? You can never really know with my code. I'm going to start off with bad inputs for both, 1234 and 1234. Now, when I hit submit, right away the browser says, sorry, that doesn't match the input. So, I'm gonna go ahead and stick in a 5. Great. That'll work. So, now let's go ahead and hit submit. And you can see it actually accepted that value when I only put in four digits. The problem with min and max is that I'm not making it be at least five digits. In mathematics, this is the exact same thing as just plain old 0. So, in this particular case, if you really want there to be five numbers you want to save it as a pattern. So, as we've seen, not every browser supports every input type or even the pattern attribute. So, what we want to do is start thinking about how we can use the JavaScript that we've learned to write functions that can do a kind of custom validation on the events. So, before you dump too much into JavaScript, go ahead and embrace these new input types and the attributes that are provided. Even if the browser doesn't support them yet, there's a really good chance it will support them soon. Plus, these input types tend to add a little bit of styling and semantics that are really nice for the user. But you will still need to add JavaScript if you want to ensure that the input is correct. Don't depend on the browsers. Don't get lazy. It's time for us to start looking at how you can start writing code to make everything more secure. Thanks.
