This lesson we're going to be looking at getting all of the input values, we already have a variable
called inputs, which selects all of the inputs that we have on our page so we can loop through that.
So whenever the validation is to take place, we can get that inputs, object and loop through all of
the values that are available.
Using for each allows us to iterate through each one of the available inputs and we can create a function
and we'll call that E-L.
And what this will do is this will output each one of the active inputs that are available on the page.
So when I do the submit, you can see that we're getting all of the input values.
So each one of them has a name and this is how we associate the values so we can also pick up that name
information from the inputs.
So let's set up a temporary name variable using the element that we've just selected.
And as we iterate through them, we can use get attribute to get some attribute information that's contained
within the element.
So if you want to get the name, we could get the temporary name that's available or the name that's
associated with it.
And this is just going to be picking up the as it loops through all the inputs, it's going to be checking
to see if it has a name and what that name is.
So you see that we've got email, password, username and nul.
So Nola's coming up as that submit value.
So next we need to check to make sure that the name exists because these are the inputs that we're checking.
So we're not checking the submit button or the values from the submit button unless you want to track
that into your object.
But for now, we're not going to be checking those.
We can add in a condition checking to see temp name and making sure that it's not equal to null.
And if it's not equal to null, then we can run our validation checks.
Want to reset the border color as this is something we're going to be updating or looping through the
elements, taking that element, because we are going to be updating that style of the border color.
So updating our border color value and we're going to set the border color back to its default value.
So it's the one that's contained within it, within the style already.
So inputs already have a DDD and we're going to reset it back to DTD because if there's any errors or
any issues, we're going to be setting it to red.
So this is where we can use and we can reset those values.
Another thing that we want to do is we also want to build our object array.
So let's set up a variable.
We can call that data and this is going to be an empty object.
And as we iterate through these, this is where we can add in the data.
So taking our data object and as we loop through, we can use temp name as the name of the as the name
of the object and then value getting that element value.
So when we finish our loop, you can see that when we cancel out the value of data, we're going to
have all that content set up and in that element.
So we've got the email, we've got the password and username.
So if we put in some information, you can see that when I do sign up, all of that information is passed
into the object.
So it built a nice, neat object.
So what we're doing here is we're using temp name, which is getting information from the attribute,
the name attribute of each one of the input elements.
And then we're also getting a value because as we're looping through all the elements that have an input
tag, then we can retrieve back values that are associated with them.
And while we're doing all of that, this is where we can build our object.
So coming up next is where we can check to see the fields and the field values so we can check to see
what the length of an element is and if it's included, if it's one of these ones that are required.
So if the length is going to be zero and if it is required, then we're going to have an error.
And that's going to be the first error that we're going to set up coming up.
So go ahead and set up the ability to loop through all the elements, grab the element information and
build an object with the element contents.