[MUSIC] Hi and welcome to the lesson. Last time we discussed HTML form input in all its many forms. This time we're going to talk a little bit about Form validation. Which will be the main topic for our course final project. So here we have a file that we've looked at before. We used it when we were setting the on blur events for JavaScript. And we have a few form elements. We have three text fields, and, actually, I've just added four. And the first two do validation with JavaScript functions called checkField1 and checkField2. And now we've got checkField3, and, on the fourth input, the one that starts on line 53. We are using HTML5 to validate the input. Now HTML5 does some input validation without explicitly using JavaScript. And because the form element here is longer I've wrapped it a bit. So here is where it begins to wrap, and I can do this to have it all on the same line if I like. But because it's long and I want to be able to see it, I'm going to wrap it below, and HMTL doesn't mind if we use white space that way. So, Let's look a little bit at how the HTML5 version works. Notice here we have the attribute pattern which we haven't seen before. And in this pattern, we have a value of Capital A-Za-z {3}. This is the regular expression which is a string that matches a certain pattern. In this case the pattern means any uppercase letter. Or any lower case letter and that we need to have three of them. And if we use this kind of pattern when the form is submitted HTML5 will check to see if the input matches the pattern. If it does it will allow it to go. If it doesn't match the pattern we'll get a message. So let's look at that. So, here's that form. I'll refresh to make sure I have the most recent version. And here, I'm going to type, 4. Just to make sure that I'm not using three letters as required. Now when I click submit, notice here I get a please match the requested format three letter country code. If I go back to the code itself, notice here there's a title attribute that says three letter country code. So this is the error message the user gets if they fail to match the pattern. The problem with this approach in HTML5 is not supported in all browsers, so at some point in the future you may be able to do some validation like this, by using a regular expression. Another challenge with regular expressions is not everyone knows or understands them. So rather than writing your own regular expressions, unless you really enjoy doing that, you can look them up in a book or on a website and use the regular expressions other people have already written. Make sure when you're doing this, especially if you're not sure how the expression works, that you test it to make sure you get the results you want. So let's look at an alternative that's probably a better choice at this point, on line 52. We have a version of this same thing in this JavaScript function that starts on line 28, and it's called checkField3, and you may recall that here on line 52. And lines 50 and 51 as well we have you on blur. And each are set equal to the value of a JavaScript function. So here in checkField3, we're getting the value. From the input as we've done many times using document.getElementById for field three. And on line 30 we have something new a variable called regex and its said equal to the same regular expression we saw in the HTML5 input below. Now we can use regex dot test, it's this variable's name in here. Regex.test and then, the field. So this field is the field we're getting from the user input and regex.test will execute this pattern on the input. And if it matches we'll get input accepted. If it doesn't match we'll get a message saying we should use a three letter code. So lets give that a try. Again, I will refresh the page to make sure I have the most recent. And here, I'll type, say just a d and then by moving out of the field I'll execute the on border and notice, please use a three letter code, and if I do use a three letter code like that, then I get Input accepted. On the other hand, if I use a number, I'll get the error message again. Now the advantage of using JavaScript to validate this input is that it will work in all browsers. Now keep in mind, input validation is important for our applications because our users will not always type what we want in fact frequently they will type something other than what we had in mind so we need to do the validation to make sure we're guiding them. Here, just by saying we want a three letter code. For instance, when we mouse over this, we can see three letter code. That doesn't mean the user will actually type it. So we have to take extra steps to make sure that their input is what we need and expect. Well, that's all for this lesson. And in the next lesson, we'll continue looking at validating HTML forms with JavaScript.