[MUSIC] Hi, and welcome to the lesson. Last time we talked about the importance of form validation, and we use JavaScript and regular expressions to validate user input. In this lesson we'll look at our most complex form example yet. Notice here on line 12 we have a form tag. And this form tag has an action attribute. If this form was going to be sent to a server, the action would have the name of the program on the server that would process the form. Since we're only doing client-side development in this course, we'll use it as a placeholder. Notice too that this form has a table tag within it. This table is providing structure to the form. Notice that this table has rows, and each row has three table data elements. If we look at the form, we can see three columns of five rows. The left most column has the label, the middle column has the input, and the right most column has what we call a prompt, which gives the user some idea of what they should be typing into the input field. Notice that this table has a border of 0. I'm going to give it a border of 1, which will give it a one pixel border so we can see the boundaries of the table on the webpage. Now, you can see the actual table. Now, this particular view doesn't really look very attractive, and it's probably better without the lines, but it shows the structure that the table is giving the form. Let's go back, and turn that off. We could turn it on later if we wanted to. So, notice that we've got the label, the input, and the feedback, all as classes. This is going to allow us to apply a consistent style to every label, input, and feedback in the form. If we go to CSS, we can see here we have style for the body, the table, the table data and then down below we have selectors for the IDs and classes. Like ID fullpage, or a class, label column, input column, and feedback column. And these give a consistent style as I mentioned to each of those elements in the form. Now, this form also has JavaScript for validation, and we can see it work a bit. If we refresh we'll get rid of the table, and if I put in just one, We'll try a letter, one letter and click away. The onblur event fires, and this field requires more than one letter of input. So what's being called there, Is this function onblur validateFirstName, and on the last name, we have validateLastName, but notice in this HTML, we don't have any JavaScript tags. Well, we do really on line 8, but no JavaScript to go with it. We're seeing here for the first time the src attribute of the script tag where we can provide a filename that contains our JavaScript. This is very useful when our JavaScript is longer and we like to keep it in a separate file. And we have that here. So here's our validateFirstName and our validateLastName functions. They work very similarly, they have a different regular expression, but are otherwise essentially the same. In validateFirstName, the regular expression allows lowercase and uppercase letters. It allows a space, it allows an apostrophe, and a dash. And it has a length, between 2 and 15 characters required. The validate last name is similar, except it's between 2 and 25 characters required. So here, we're doing the regex test of the field for first name, and below here for the field of last name. And if the test is successful, this will return a true and we'll get a style green and the word valid. If the test fails, meaning that the user's input doesn't match this regular expression, then we'll get red and an error message which we already saw. So let's return. We'll put in some more letters. And now that we've put in enough letters, we're getting a message valid. And if we do the same thing here, we'll also get valid. So that's all for this lesson. Next time we'll continue looking at this form and some of its additional validation and features.