Hello and welcome.
We've got a basic default HTML page indexed HTML in this lesson, we're going to be setting up the form
that we're going to be using in the upcoming lessons in order to validate the form contents.
So first of all, set up a form tag, give the form a name.
You can call it whatever you want to call this just my form.
And then within that form we're going to be adding in some input fields.
So we're going to need to get an email address.
And this could be a really basic form.
So setting up an input type and the type can be text.
So we're looking for an email.
And with each HTML5, if you do put type email, then it already has some validation.
And we did want to focus on the JavaScript validation.
So that's why we're going to keep it, keep it as a text input.
So we've got a name and the name for this input is going to be email.
And then after each one of these inputs, I'm also going to create a span and give that span a class
of error.
And then by default, we're going to be hiding these elements with elements of the class of error.
So we're going to go ahead and are going to just hide those.
So we've got an email.
Let's add in a few other fields that we can pick up.
So typically, we might want to get a password and we'll keep this as type text as well so that we can
see the password data that's being entered in and then also add in that span with a class of error as
well as height.
And this is going to give us an option to output a message to the user just underneath the input.
And then lastly, let's do one more.
We'll just call this one username and we can keep this one as text as well.
And this can have a name of user name.
And again, that same thing where we've got a span with a class of error as well as height, and we're
going to be manipulating, removing the class of hide and then updating and updating the inner turmoil
of the element with a class of error and doing all of this with a JavaScript.
And then lastly, one more input, and this one is going to be a submit.
So this is a very typical simple form.
Also, let's assign a value to this one.
So maybe this is sign up or log in.
So we've got some inputs that we're asking in the form.
So next we need to validate the forms.
When we click it, it just simply submits the form data and it moves along to the next page with the
Post in order to get information at the top.
So next, let's bring our JavaScript on board, connecting our elements, using the JavaScript.
So I'm going to set up some variable objects.
So first one that we're going to need to work with is the form.
So using documents and query selector in order to select the element, we're going to select the elements.
And the element that we can select is a form when we have the one form that we're working with.
And if you do have more than one form on the page, of course you've got to be more specific in your
selection process.
We're going to select all of the inputs that are available on the page.
So that will allow us to fairly easily loop through them and pick up all of the input values without
having to be really specific with the names.
Also, we want to pick up all the elements with a class of error.
So the same thing where we're going to use query selector all in order to pick up all the elements with
a class of error.
And this is where all of our message error messaging information can go.
And one more variable to set up.
And this is going to be listing out the required fields.
So anyone with the name of anything within this required array is going to be a required field.
So there's going to have to be a value within this field.
So once we've set that up, our JavaScript just makes sure that we do have access to all of the elements.
So we do have form as an object format.
We've got the inputs.
So we've got all of the inputs listed there on this should be query selector all.
So it's a good thing to always to check.
So now want I do inputs, you're going to see that it's a node list and we do have four inputs.
Remember the type, the submit button is as well an input as well.
And then the errors and this is a node list.
So we've got three elements with a class of error within our errors node list.
And then lastly, these are the required fields.
And again, with HTML5 you can put required in and that will make it a mandatory field.
But we did want to focus on the JavaScript and the DOM manipulations.
So we are going to be focusing and strictly using the JavaScript in order to validate the form contents.
So go ahead and set this up, check to make sure that you've got your elements as objects and JavaScript
and you'll be ready to move on to the next lesson and you could create a simple form.
You can also add in, add some additional inputs as well.
We're going to be making this form fairly dynamic.
And as you can see, when we're doing a query selector, all of the inputs doesn't matter how many inputs
we have, we're going to pick all of them up in our.
Form, so coming up next, we're going to create some interaction with the form and then bring the validation
into our JavaScript.