Project we re gonna create an indexhtml. Which is going to contain all of our form information if we hit exclamation point and enter. It s going to generate our form for us. We can just set the title here to be form and inside of our body.
We re just going to create a generic login form and we re just going to set here. The action is just going to go to our current url and we re going to set the method here equal to get you could just leave these out because these are the default values. But i like to be explicit next inside of our form. We re going to create a label first actual is credit div.
So that our content is going to be on new lines. And we re going to create a label here. Which is going to be for our name and we re going to create an input oops make sure we actually set this as our name for the label. So we know what it is and we re gonna create an input here and this is going to have an id of name.
It s going to have a name of name there we go and we want to make sure the type is equal to text here close that off and let s save that open it up using live server and as you can see we have our input here. Which is perfect now let s copy this down and do the exact same thing..
We re gonna do this for a password. So we re going to give it an id of password. We want to give it a name of password type of password and let s make sure our label. Here is also set up properly and lastly.
Let s add a submit button so we re just going to say this button here with a type of submit and of course. The text submit and now we have our form here and we can submit it and you can see our information is going through now with that out of the way let s actually set up here. A div. Which is gonna contain our error message.
We re gonna give it an id here which is error. So we know this is where i error message is gonna go there we go close that off and this is going to be point. Four now now let s create a new page here what are you gonna be script jeaious and let s make sure we include that in our index page here at the very top we can just defer this so it loads. After our body.
And we can set. The source. Here at tv. Script j s.
And there we go and if you re confused by any of this form syntax or input syntax make sure to check out my html forms video where i go over everything you need to know about forms and the input element inside of html now moving under our script ojs here. Let s actually go in here and select our different inputs so the first thing that we re going to have is we re gonna have an input..
Which is going to be our name input. So it s going to be equal to document dot get element by id of name do the same exact thing. But we want to do this for our password. There we go and we re also going to put an id on our form.
So we can select this we re just gonna say form save that and inside of here. We re gonna say our form is going to be equal to document dot get element by id. And it s going to be an id of form now in order to actually catch these errors before they get submitted because by default. We click submit it automatically refreshes our page.
So we need to do is we need to add an event listener onto our form and we just want to add the submit event listener and inside of here in order to cancel out our forms from submitting. We could just take our e here whoops e. There we go now we can just say e dot. Prevent default and this is going to prevent our page from submitting and now when we click submit you see that it doesn t actually submit our page which is perfect.
But we only want to do this if we have errors. So let s create a variable here if we re just going to say messages and this is going to be equal to all of our error messages. And now let s check for our first error. Our first error is going to be if our name value is equal to an empty string or if our name value is equal to null this means the users did not pass in any name.
So we want to make sure we send a message. So we re going to say messages dot push and we just want to say name is required and then down here we can just check to see if messages dot length is greater than 0..
This means that we have some form of error. Which means we want to prevent the actual form from submitting and we want to send these errors to our error. So let s create another variable here. Which is going to be air element.
We re going to set this equal to document get element by id and this is just an id. The error that we set earlier and now what we want to do is we can take our error element. We want to set the inner text here and we re going to take our messages and we want to join each one of these by a comma. So they re all separated from each other now we can save that and as soon as we click submit you re gonna see we get an error message that says name is required because we didn t put a name.
There we go now if we try to submit this after we put in your name. You ll notice that it actually goes through and that s because we need to make sure we check the value here..
So we ll say value dot length and now if we put in your name click submit you ll see that it said. The password must be longer than 6 characters. And if we make it longer and click submit it ll go through. We can also do other things such as checking to make sure.
The password is not too long so we can say if the password length is greater than or equal to 20. We can say that the password must be less than 20 characters and now we can do the exact same thing if we submit add to it for the name you see it must be longer than 6. But if we make our password. Incredibly long and click submit you see it must be less than 20 characters lastly.
Let s add one more validation here so we can say if our password whoops password value is equal to password then we want to throw an error telling the user that they can t set their password password. So we ll just say messages dot push password cannot be password and now if i type in password here. Putting in some kind of name click submit you see i get password cannot be password. But as soon as i make it something other than password it ll go through just fine.