[MUSIC] Hi, and welcome back. This is our final guided practice lesson in preparation for the course final project. So in our last lesson, we looked at a version of this file, called formsInput2, and here we have a renamed version called formsInput3, that I've made a few changes to. First, I've added the action attribute to the form. We've talked about this in previous lessons. The action attribute normally contains the name of a program on the server that will process our form and return a result. In our case, we're doing client side development only, so we don't have a server side or a server side program to submit to. You may study that in future courses. In this case, I've created a so called dummy HTML page that I've named mysubmitpage.html, and that page is right here. I created it using a version of our standard template for HTML, and I've given it an H1 tag, some text, submitted. We'll see how it works in a moment. So this file is here with the rest of our files. Here's our formsInput3, and here is our mySubmitPage. And so, if we make sure we're saved. This file is saved, and this file is also saved. We can go to our browser right here. We'll refresh. And if we try to submit, we're going to get the HTML5 error feature that we talked about previously, saying that we need some text. And so, I'll add some. And then, when we submit, we get the submitted. So that it gives us a more sort of realistic way to practice with our submit button. And that submit button is right here. On line 50 is input type submit, and value submit. But notice, on 53, I've included a button that doesn't do anything, called click me. If we didn't want to use a submit, if we weren't using an action with a dummy page, we could instead use a button outside of the form like this called Click Me. And in its on-click event, we could do all of the validation we wanted to do so it would act similar to a submit button. And that's up to you, which one you'd prefer to use. This sort of kind of disabled submit, or a regular button, and work with the on-click. And, of course, you can also work with the on-blur events of all the various elements of your form, on-blur or on-click. So, we've seen how we can use it for submission. But you may have noticed here also on line 25, I have a new event. And this is called the onsubmit, it's associated with a form. And here we have a tiny bit of JavaScript where we have return and validate form. This is a function which we have up here, but notice that it's empty. And we'll make our validate form function return either true or false. And if it returns true, that means the form is valid. If it returns false, that means that we've decided the form is not valid, and we don't want it to submit. So, let's try this. We'll try alert, and just to have some text, we'll say, no way! Don't forget our semicolons, and then return false. Now, by saying return false, we're saying that it is not valid. And so, notice that before we saw it go to our submit page, here, we'll put in some text. Then we'll click Submit, we'll a No way! And notice, now it doesn't go to our Submit page. But if we were to change our text, and keep in mind the text here is not really important, we can have it say whatever text we want. What's important is this return false, which means it's not valid, or return true, which means it is valid. Now that we're returning true for our validateForm, and that's onsubmit return, and then this validateForm will return true or false. We will return here, and fresh, and some text. We said yes. And we submit. So this gives us an opportunity to do validation and return true or false. And I've prepared some additional code on a separate page that I'm going to now go copy. And we can see how that'll work in our function. Now I don't need this code anymore. I'm going to keep the name of the function, but I'm doing this cut and paste just to save time. So now, we have our same validateForm function, except it has new code inside of it. And here, notice that, you may have noticed, actually here, that we have user password in two fields. A better way to do this would be this is a password, and this field that would have a bit of text saying please retype your password. Please confirm your password. Something of that nature. And here we have, on lines 45 and 46, two inputs. One is password1, one is password2. And here, we're using our ever present document.getElementById, password1, and also password2. And putting these values into two variables, pass1 and pass2. You might prefer to name these more descriptively, rather than one and two, like password and confirm, password. Now we'll test them to see if they're equal. We'll use the equality operator to do that. And if they are equal, we're going to alert passwords match. We might not want to give this to a real user of our site because, if it matches, they'd rather probably that we just not mention it. We would mostly just mention if they were not matching. But if they match, we'll return true. And if they don't match, we'll return false. Now, we could do as much validation as we wanted here. In this example, we're only validating the password. We could validate any other fields we chose to validate on validateForm. So, let's save this. And go here, type in a bit of text there. And then, I'm going to type in AAA. And here, AAA, submit. And we're getting passwords match, which is probably unnecessary as a message. But notice it submits. Now, if I return, and this time I'm going to type AAA. But in the next field I'm going to type something different, SSS. And notice password do not match, and it did not submit. So this gives us another way of looking at submitting and validating our forms. And I want to wish you all the best of luck on your final projects.
