[MUSIC] Hi, and welcome to the lesson. Last time we look at rather complex form and how it does validation for first name and last name. As well is how the form itself was structure. In this lesson, we'll continue examining the same form and some of its additional validation and features. So, the next element in this form from last time is the phone number. And notice here we have the phone prompt, the suggested format for our user, xxx-xxx-xxxx. And if we return to the form, we can see here that it's giving that as a user prompt. If the user types in a wrong value, say just one number, they get an error. And we can look at the JavaScript for that, and as we mentioned in the last lesson, this JavaScript is in an external file called forumvalidation1.js. And here is the code that does the validation starting on line 33 with validate phone. Now notice it has a regular expression and in this case, we're doing three digits and a dash, three digits and a dash and four digits. This were going to expression the d stands for digits and the number says how many are required. The dashes are literally part of the string. So, any phone number that doesn't follow this format would fail the test. If a test passes, we'll change the style part of the prompt to the color green and if it passes. It will change it to green, will also give the word valid to our user. And similarly if it fails it will change the color to red and give the error message that we just saw. So, there's a little more we can do to make this easy for our users. We can try something called the placeholder. Now here I am on the form on the input for the phone and I'm going to add an attribute. This one's called placeholder and you can see it here at the end of line 32. So, we have the word placeholder. And then an equals, and then the placeholder we want to give any text we want to provide we can. And so, if I save this, and we return, and refresh, we see we have this prompt, and we have a similar prompt here. And within, if we type here, the prompt or rather the placeholder, disappears. And since this is the correct format, we get valid. So, we can decide whether we prefer the prompt off to the right within a span, or if we prefer it as a placeholder that will disappear when our user starts typing. We don't really need both, but you can choose the one that you like better. So, the next thing I'd like to look at with this one is actually- Actually running the form, so let's put in a name and that validates. And notice here if we use just one letter, that will fail the validate, we need at least two. So, we use a few and the item price here you probably noticed is set to ten. But this field is read only, so we can't change it, I'm clicking on it now and I can't put my cursor in there in order to edit it. And this is because in the HTML, we have this one on line 42 with the word readonly, and if we place this word in an input, it means that any value that is given cannot be edited. So, in this case, to prevent the user from editing the ten, we've made this read only. As an example, we didn't really need to do that but it shows a feature of HTML. So, now let's put a quantity of five in. Now because we have order five items and they're $10 each, we should expect to see $50. And we see order summary, we see the user's name. It's changed to upper case, which I'll show you in a moment, the phone number, and the order total all sort of giving back to the user. So, if we return to the JavaScript and scroll down a bit, we've got a function here calcorder that is being run on the on click for the button. And it's collecting the first name, the last name and on line 55 it creates what we call here a username. And it does that by taking the first name, the derivable for the first name using the plus sign which can concatenate strings which we talked about in our previous lesson. It just means that it brings them together. So, we have the first name, then we're putting a space. This is the space right here, and then we're putting the last name. So, the username ends up being first name, space, last name and then we'll get the phone, the quantity and the price all by the methods we've seen before. And then we place into the inner HTML the output we saw on the page order summary. The user's name, their phone number, and the price, which for the total, is the price times the quantity that was purchased and we saw that was $50. One thing here of interest is that we've used the function two uppercase, which is a built in JavaScript function that works on strings. Its to make the username fully uppercase in returning, we see here FRED SMITH is in fully uppercase. Now we do that just to show the function to uppercase but we can remove it. Save, go back to the page, and try this again. Fred, Smith, 777, 777, 7 we need a -7777 quantities is 5 and will Order Now. And notice now Fred Smith is in the same case that user type it rather than automatically in upper case. So, that's all for these lesson. In the next lesson, we'll be looking at some of the more advanced features of Java Script that we can use in our programming, not just in form validation but in general JavaScript programming.
