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 introduces the challenge that you'll be working to complete.
Prerequisites
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
[MUSIC]
0:00
Hi team, Rohald here.
0:09
In this practice session,
0:11
you'll build your JavaScript skills
by practicing DOM manipulation.
0:12
So far, you've learned about event
listeners, selecting elements,
0:16
adding classes, and
adjusting styles on a page.
0:20
In this session,
0:24
you'll use these skills to add visual
validation indicators to this form.
0:25
Validation messages indicate to a user
if what they've entered is valid, and
0:29
give them hints as to why the information
they provided is invalid.
0:33
Launch the workspace with
this video to get started, or
0:37
download the project files and
use your preferred text editor.
0:40
In the index.html file, you'll find
the structure of the form with a label for
0:45
each of the three fields.
0:50
Inside the label,
0:53
there is an input element as well as the
span that contains a hint for the user.
0:54
By default,
this span is hidden from the screen.
0:58
In the app.js file, I've already
created a couple of variables for
1:01
you that select the form element in each
of the three input elements on the page.
1:05
There are also three validation functions
which you may have seen before in
1:09
the regular expressions course.
1:14
You can use these functions to see if
the value provided by the user is valid.
1:16
When called, these functions will
return either true or false,
1:21
depending on if the value passes the test.
1:24
If you wanna learn more
about regular expressions,
1:28
I've linked our course in
the teacher's notes below.
1:30
Your challenge is to prevent
the form from being submitted
1:34
unless all the fields have a valid value.
1:37
If they don't,
1:39
you'll wanna give the user a visual cue as
to what's wrong with the provided value.
1:40
To do this,
you'll wanna take the following steps.
1:46
First, set up an event listener on
the form element and make it listen for
1:49
the submit event.
1:54
Inside the event listener, set up
a conditional that checks if the username
1:56
input has a valid value by calling
the provided validation function.
2:00
If the validation function returns true,
add the valid class to the label element.
2:05
This class will add the green styles and
check icon.
2:10
If the function returns false, you'll
want to add the error class to the label
2:13
element, and display the sibling
span of the input to the user.
2:17
Once the username validation is working,
add the same behavior to the email and
2:22
password input fields.
2:26
This practice will be a great way to
help reinforce what you've learned about
2:28
working with the DOM.
2:31
So good luck, and have fun.
2:33
In the next video, I'll show you one
possible solution to this challenge.
2:34
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