Video instructions and help with filling out and completing Who Form 8815 Verification

Instructions and Help about Who Form 8815 Verification

Hey YouTube how's it going it's Quinton here and welcome to tutorial number 30 and in this video I am finally going to start speaking to you guys about some basic form validation okay so if you take a look at our code here real quick then this is basically the same code from the previous tutorial where we just have this form on our web page that has three inputs so one for you to put in your name one to put in a password and then the last one is the submit button okay so if we run this in Firefox then this is pretty much what it looks like just a place where you put in your name password and you can click login but right now if you click login it takes you to this page that doesn't exist so like I told you guys before whenever we're working with forms we kind of need to have some sort of clever scripting on our web page so we need some sort of a server-side a file like a PHP file but just for the purposes of this tutorial you guys don't know any server-side programming yet I'm assuming because I didn't teach you any so what we'll do is instead I'm just going to put this action equal to submission dot HTML okay and that is another file which I've made and prepared up here and this is all pretty basic but it's basically just a web page that says thank you for submitting your data so now when we go back to this page and I click refresh when I click login I'm going to get this little page of here that says thank you for submitting your data so even though this entire web page is kind of a lie because we don't actually do anything with the data submitted it's just there we don't have to look at a webpage that doesn't exist or something like we don't have to look at that error message okay so sadly I have to tell you guys that we aren't actually going to be logging a user in to our website in this tutorial because like I said we need some server-side scripting for that but what we are going to do is we're going to use JavaScript just to make sure that the user has actually filled in information before they get led through to the next page so as you can see right now are filled in nothing here and our folding nothing for password so surely I should not be allowed to go on but when I click login it still says thank you for submitting your daughter I've still gone through to the next web page so that's what we're going to be doing in this tutorial we're just going to be looking at how to check that the user has actually fold in some information and then we'll move on later on in some in some of the next videos to just check that the information that they fold in has met certain requirements okay so the way we actually stop the user from going through to the next page is we have to use a return statement and also an event ok so let's go back here to our code and in the top of my form I'm going to add another attribute called on submit and this is actually an event okay so this happens whenever the user clicks on this button oh yeah so whenever the user clicks on this button because it's a submit button then this for this event gets called on submits okay and what we want to do here is we're going to want to use a return statement so we're going to type in the word return and then we're going to I have a function that is going to check whether the user has fold in some information so I'm just going to call my function check info and you can call this anything you want as long as you're going to use the word return just before your function that's fine okay so basically what's going to happen now is when the user clicks on this button over here then this function is going to run check info I haven't made it yet but we're going to make it now and if this function returns true then the user will be allowed to go through to the next page but if this function returns false then the user is going to stay on this page and they're going to get we will put out an error message just to tell them that they need to fill in the data correctly okay so let's go ahead and start making this function so I'm just going to go ahead and grab that copy so a function check info and now what we want to do is we're just going to check the most basic thing okay we want to check that the user has actually fold in some information inside of these two input elements okay so to do that we obviously going to have to make that value of the input element variable so I'm going to go ahead and give these two input elements of an ID okay and the first one I'm going to give an ID of username because it's the one for username and the second one is the input for password so I'm going to give it an ID of Paul swerd okay so now we've got our two IDs we can go ahead and make a variable and I'm going to call the variable username so I'm reusing this thing this word a lot but I'm basically just calling the username username wherever we're working with it okay so I'm going to call it username and I'm going to then set that equal to document