Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
This video covers one solution to the challenge.
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Did you get the validation
indicators working?
0:00
Don't worry if you didn't.
0:02
Keep watching to see my solution and
then go ahead and give it another try.
0:03
I started by adding an event listener
to the form and made it listen for
0:07
the submit event.
0:11
This will be triggered as soon as
the user clicks the submit button.
0:12
Next up I created a conditional and
called the isvalidUsername function.
0:16
If this returns true,
0:21
I'm setting the className of
the label element to be valid.
0:23
I've selected the label element
with the closest method.
0:27
This works similarly to QuerySelector
using CSS selectors, but
0:30
selects the closest ancestor
that matches the selector.
0:34
In this case, that would be the direct
parent of the usernameInput.
0:38
If the provided value is not valid,
I'm calling the prevent default method to
0:42
stop the form from being submitted and
I add the error class to the label.
0:46
Finally, by using next element sibling,
0:52
I change the display value
of the span to block.
0:54
Let's test this in the browser.
0:57
The errors are showing up when I try to
submit an empty form, which is great.
1:00
But, notice, when I provide a valid
value to the username field and
1:04
resubmit the form,
the hint remains visible.
1:08
Let's move back to the JavaScript file and
add one more line to make sure that
1:11
the hint is hidden whenever
the value is valid.
1:15
I'm using the same way to
target the span element and
1:19
set the display property to none.
1:21
Let's give this another go.
1:24
Save the file and refresh the preview.
1:26
The error indicators show up when
an empty form is being submitted, and
1:28
when I resubmit the form after providing a
value, the hint is removed from the page.
1:32
Great.
1:37
Now that the username is working, it's
time to move on to the other two inputs.
1:38
If you weren't able to
complete the challenge before,
1:42
this would be a great time
to pause the video and
1:45
try to apply this same logic to
the email and password fields.
1:48
All right,
let's scroll down to the email validator.
1:54
As you can see,
1:57
my code for the email input looks
very similar to that of the username.
1:58
The only thing that's different between
these two is the validator function which
2:02
is being called and the input element that
is being used to apply the styling to.
2:06
To avoid all this repetitive code,
2:10
I've created a function that handles
these repetitive tasks for us.
2:12
This will also make our
code more maintainable if,
2:17
in the future,
we add more input fields, or
2:20
if we want to use this same
functionality elsewhere in our app.
2:23
The function I created is called
validator and it takes two arguments.
2:28
The first one is inputElement.
2:32
This takes in the input element
we wanna test the value of.
2:34
The second argument is called
validationFunction and
2:38
we'll take in the function used
to test the provided value.
2:40
In the function body, I'm calling the
validation function that was passed in.
2:44
If this evaluates to be true, we're adding
the valid class name to the label of
2:49
the provided input element and
hiding the next sibling element.
2:53
If the validation failed, we're stopping
the form from being submitted, adding
2:57
the error class, and showing the hint to
the user just like we did previously.
3:01
To use this function, I'm calling
it once for each of the inputs and
3:06
passing them the element to test
along with the validator function.
3:09
Let's give this a final
try over in the browser.
3:13
When we submit an empty form,
all input elements show their hint and
3:16
error styling.
3:21
And when we provide some valid values,
3:23
the styling updates to the valid
styling as we submit the form.
3:25
Awesome, all right, this completes
this practice session, nice work.
3:29
Again, if you couldn't complete
certain parts of this practice,
3:35
that's totally okay.
3:38
You could always start over and
try it again.
3:40
You'll also learn more about Dom
manipulation throughout our JavaScript
3:42
curriculum.
3:46
Thanks everyone, and happy coding.
3:47
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up