Well done!

You have completed Practice DOM Manipulation: Form Validation!

Preview

Introducing the Practice

2:40 with Rohald van Merode

This video introduces the challenge that you'll be working to complete.

Prerequisites

Resources

Regular Expressions in JavaScript

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

[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