Welcome back.
Lesson of the section, and this is where we do a final code review of the application we've been building
out in the earlier lessons, it's a little bit of styling and you're welcome to customize that as needed.
We created a form HTML form, so creating inputs.
And one of the things that we did have to stay away from is the HTML5 input types.
So if we set email here, then we'd get the five email and we want to strictly stay with JavaScript.
So that's why we kept it as text and also while building it, we kept password as text as well so that
we can see the content that's being input there.
We use JavaScript to create some objects of the elements on the page.
So that gave us the ability to easier interact with them.
And we also set up some default variables.
So we have a listing of the required fields and we can add as many as we want.
This is fairly dynamic.
So if we want to add additional required input fields, we can add them here as we add them into our
HTML.
We also adding an event listener to the form submit as we didn't want the default form submission to
happen before we do our validation.
So this is our spot to do the validation in between.
So we had to prevent the default action from happening.
We got the event object, prevented default, created a variable, an object in order to hold some of
the data from the input form.
So building it out as an object, we loop through the elements with the class of error and we added
the class side to them as so that the form could be submitted and we could update it depending on the
updated data.
We also set a variable called error versus boolean value to false.
And if we do throw any errors, so we're going to set it to true and then that's going to prevent us
from submitting our form.
So as long as error stays false, then we're going to submit our form.
So we had to loop through all of the inputs.
So again, trying to be as dynamic as possible.
So if we have more input fields, we can really easily incorporate them in our application as we're
selecting all of the elements that have that have a tag of input and adding them into the inputs object.
So we loop through and we pick up the element attribute name.
So this gives us the ability to grab that attribute name of each one of these.
So we're going to get email, password, username, and this one doesn't have a name, so it's not actually
going to be picked up.
So if it is null, we're not going to do anything with it.
So that means that's a submit button or another one that we're not trying to track.
So it actually doesn't matter if it's sitting in the form we're setting our default border color to
the default colors or starting color of the border.
So because whenever we throw some errors or change it red, so we want to reset them all back to the
default color as we loop through.
And if there are some errors, then we pass into the function, the error handling function.
We're passing the element, a message as well as the current input field that it's on.
And then, of course, we're setting error to true.
You can see that these are the conditions that we're applying.
So first we're checking to see if length is equal to zero and if it is equal to zero, and if the field
is required within our required list, then we're going to throw this error.
The next one that we check to see is if the email matches the email pattern that we've got from regular
expression.
And if the result is true, then if the result is false, then we know we've got an invalid email.
If it's result of true, then we're going to move on to the next condition.
And the same thing here for checking the password input that we're checked.
We've got a regular expression that we're checking and we're testing against it.
And if it's not matching the criteria, which are letters and numbers, then we throw an error.
So passing it into our error handling function.
And we're also checking to see to make sure the length of the password to eight characters.
So this could actually be two.
So just a quick update there.
So this is making sure because it's greater than two, so it's not going to be equal to two.
So that's why three is greater than two and eight is less than nine.
And that's where we're going to throw this error.
If any one of these statements comes back true, then if this whole statement condition comes back as
is true, then we're going to throw the error there.
And if we don't throw any errors then or if we do throw any errors, we're still adding it into our
data object.
So we're building out a data object of all the inputs, using the names and the values.
And then we're checking to see if any of the errors are true.
And if they are true, then we're going to skip this part.
And if they're not true, then if they're still false, that means that we didn't throw any errors and
we're good to submit the form.
And this is where the form submission happens, triggered by JavaScript, our odd error handler.
So this is where all of the magic happens, where we select the next element that's next to the current
elements.
So the structure one.
That we have an input and we have a span and the span has a class of error and we can hide it so we
can remove the hide variable, the Hyde class that's associated with it, and then we can update the
inner text.
So updating the field and then the message and changing the border to be rid of the element and setting
the focus on that element.
So that concluded all of the project.
So now we have a fully functional form that's going to look for inputs.
So this is the only one that was triggered.
And until we get a valid email, we can't submit the form.
And you see, once we've got the valid email, we're submitting the form and the form is going back
to that indexed HTML.
We don't have any backend form handling that we're doing.
So that's why it's submitting it there.
But the form submission is being processed and done and this is how you can add validation into your
form.
Source code has been included.
So I do encourage you to try it out for yourself as well as if you have any questions or comments or
need clarity on the content.
I'm always happy to help.
Thanks again for taking the course and for going through the section on form of validation with JavaScript.