In this lesson, we're going to be building our required fields and then we can add that in down here,
checking to see if the field is there and if it's one of the ones that we're requiring.
So taking the element and getting the value and each one of these.
So we're using the string length value, which is going to turn back the value.
And we're checking to see if string length is zero and if it's zero, that means that that field is
doesn't have any content.
So we can add in our error message or create a function in order to handle the error so we can have
the function called add error passing in the element that we want to update.
And then also a message.
So this message is required field and then also passing in the name of the required field.
So in case we want to use it in our output so we have an error message that we can create, and that
means that we got to create a function in order to handle that.
So function and error.
So this function is going to be the one that's going to show the error messages and that error content.
So we're picking up the elements.
We've got a bunch of parameters, the message that's contained within there, as well as the field name
that we're using.
And here we can create a temporary variable so we can also select the next element sibling.
So this is a JavaScript variable that can allow us to select the next element sibling.
So show you what that is.
And when I click that, you can see that the next element sibling is all of these error messages.
So the next one for email is going to be error hyd.
So that's this one here.
Password has one, username has one and then null.
We're not we're not sending over using class list.
And then the method to remove we're going to remove the element that has the class of hide.
So next sibling.
So that means that if I go to inspect and we don't have any content in there yet.
But you can see that when I go into form and we've got all of our span's now have the error message
in there.
So if I refresh and if I do sign up, it's going to it's going to remove it from all the elements except
for email.
So email the next one.
The error one still has hide.
But when we look at the next one on the password, the height is gone as well as the next one for the
username.
The height is gone as well.
So that means that we're showing them.
So we need to add in some text.
We can use text content to add some text into it.
So taking that field name and let's bring that to uppercase.
So it's using the JavaScript method to manipulate the string contents, to manipulate string contents.
And we're going to add in whatever the message is into the content.
So let's see how that looks.
So now when we do sign up, you see that all of these are showing now.
And that's exactly what we want because we want to pass that error message to the user, also taking
the elements, taking the style.
And as we've set the border color to a default color, we can also update it to read if there's any
errors and then also taking the elements and applying focus to that element.
So we passed on all that error message and this is our error message handler function.
So now whenever we throw an error, you can see that they all go red and the focus, the focus is going
on the last one because it's doing focus on each one as it iterate through.
We're tricking this on any ones that have a length of zero, but they're not all required.
So we want to look through and we only want to return back the ones that are actually required variable
that we set up an array that we called required.
So we're going to check to see if length is zero and if the required array includes the contents of
temp name.
Name again, is that attribute name if it's required.
So only right now we're requiring email and username.
So we're not going to get an error message on password as we've got contents or not.
That one is not required.
And when we don't have any contents in the username, then that's when it shows up or the email and
in this validation.
And then we've got some more validation that we're going to be adding in the upcoming lessons, checking
to see if this input is actually an email.
The password is going to have to be either numbers or characters.
So that's going to be some of the parameters for the password that we can add in, a few others that
we can also add in just to make sure that we've got some more additional checks that we can place within
the validation and add in a function to handle the error.
And this is going to be the one that selects the next element and all of the next elements.
Remember, within our structure, we always place the span with a class of.
And we had that class, so this gives us an element where we can add in that error message.
So go ahead and add that into your project.
And coming up next, we're going to extend on this.