Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Regular Expressions in JavaScript

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Validating a Username

5:16 with Joel Kraft

Validate the first field of the form, the username field. This field can only contain letters a-z in lowercase.

Closures in JavaScript

If you want to learn more about closures check out this Treehouse workshop. For more on the specific closure used in this project, read on below.

Creating a Listener

The following function from the project accepts a validator and produces an event listener function. The returned function can then be passed to document.addEventListener() as a callback function. Below, you can see it's being used to do just that: it creates listeners and supplies them to addEventListener. The listener it produces accepts an event object, e, and uses the validator to check whether the input it's attached to is valid or not.

function createListener(validator) {
  return e => {
    const text = e.target.value;
    const valid = validator(text);
    const showTip = text !== "" && !valid;
    const tooltip = e.target.nextElementSibling;
    showOrHideTip(showTip, tooltip);
  };
}

usernameInput.addEventListener("input", createListener(isValidUsername));
passwordInput.addEventListener("input", createListener(isValidPassword));
telephoneInput.addEventListener("input", createListener(isValidTelephone));
emailInput.addEventListener("input", createListener(isValidEmail));

This function makes the code much more concise than it would be otherwise. To do the same thing without this function, we'd need to write each handler individually, which might look something like this:

usernameInput.addEventListener("input", e => {
    const text = e.target.value;
    const valid = isValidUsername(text);
    const showTip = text !== "" && !valid;
    const tooltip = e.target.nextElementSibling;
    showOrHideTip(showTip, tooltip);
});

passwordInput.addEventListener("input", e => {
    const text = e.target.value;
    const valid = isValidPassword(text);
    const showTip = text !== "" && !valid;
    const tooltip = e.target.nextElementSibling;
    showOrHideTip(showTip, tooltip);
});

telephoneInput.addEventListener("input", e => {
    const text = e.target.value;
    const valid = isValidTelephone(text);
    const showTip = text !== "" && !valid;
    const tooltip = e.target.nextElementSibling;
    showOrHideTip(showTip, tooltip);
});

emailInput.addEventListener("input", e => {
    const text = e.target.value;
    const valid = isValidEmail(text);
    const showTip = text !== "" && !valid;
    const tooltip = e.target.nextElementSibling;
    showOrHideTip(showTip, tooltip);
});

Notice all the repetition in this second code example. The createListener function helps clean that up.

Related Discussions

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

Sign up

    Related Discussions

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

    Sign up

    Open the workspace for this video to follow along with me, or 0:00
    download the project files below. 0:04
    The project we're starting with consists of three files, 0:06
    an HTML, CSS, and JavaScript file. 0:10
    Don't worry about the CSS for this course. 0:14
    It provides a few styles to help make the form look better. 0:17
    Index.html holds the form. 0:20
    The HTML file loads the JavaScript file where we'll be writing the code to 0:23
    validate the user input. 0:28
    The four lines of code at the top of app.js select and 0:30
    store the four text input variables. 0:35
    We'll use the next group of functions to define the validators. 0:39
    They will return true or false, 0:42
    depending on whether the string passed in is valid or not. 0:44
    The comments above each one state the validation rules will apply. 0:48
    Remember that the form also reformats the telephone number. 0:53
    The formatTelephone function will do that, we'll complete that later in this course. 0:58
    In addition, I've added a couple utility functions to help with this project. 1:04
    The showOrHide tooltip function either shows or hides the tooltip. 1:08
    This function accepts a Boolean value and an element. 1:14
    If the show parameter is true, 1:18
    it sets the element's CSS to display property to inherit, making it visible. 1:19
    Otherwise, it sets the display to none, hiding it. 1:26
    We'll use this function to show and hide the tooltips. 1:30
    Another help or function, createListener, simplifies creating event listeners for 1:34
    our validator functions. 1:39
    This function accepts one of the validator functions we'll be writing and 1:41
    produces an event listener. 1:45
    The listener shows or 1:47
    hides a tooltip based on whether the validator returns true or not. 1:48
    Notice this createListener function returns another function. 1:53
    The function it returns will be the actual listener, 1:59
    which you can see will accept an event object. 2:02
    This is known as a closure, and if it seems confusing, don't worry. 2:05
    You won't need to understand what's going on here to complete the course, 2:09
    which is designed to teach you how to use regular expressions. 2:13
    But if you're curious to know more, check the teacher's notes for 2:17
    a little more about this function, as well as a workshop on closures in JavaScript. 2:20
    At the bottom, 2:26
    each form input has an event listener provided by the createListener function. 2:27
    The event that triggers each listener is the input event. 2:32
    So every time the user types, their input is validated. 2:35
    Let's get started on validating the first input, the username. 2:40
    For this field, we only want to accept lowercase letters. 2:44
    We'll use the test method for this. 2:48
    Remember, the test method is called on a regular expression. 2:52
    So I'll start by writing a regular expression literal, which begins and 2:56
    ends with a slash. 3:01
    Normally, for letter characters, I might use a word character. 3:03
    But remember, this would also match numbers in uppercase characters. 3:08
    So to limit our matches to only include lowercase, we can use a character set, 3:13
    specifying a range from a-z. 3:19
    This only matches one character, so we'll need to specify that it can repeat. 3:23
    We could either use an asterisk or a plus for that. 3:29
    For this case, it doesn't matter, I'll just use a +. 3:32
    We want to return the result of calling match so 3:35
    our handler knows whether the input is valid. 3:38
    I'll return this expression, which will either be true or false. 3:41
    Oops, and we'll also need to supply the string that we're validating to test. 3:50
    I'll save this and refresh the browser. 3:59
    I'll type some lowercase letters, and we don't have any problem. 4:04
    Now I should a tooltip if I try to type an uppercase character, but 4:09
    it doesn't appear. 4:13
    Can you think of why? 4:15
    Go ahead and pause the video if you'd like to try to fix this on your own. 4:17
    The regular expression we're testing against is looking for 4:21
    the presence of lowercase letters in the input field. 4:24
    When I typed an uppercase character, there were still lowercase letters present. 4:29
    If I erase all the lowercase letters, 4:34
    You can see the tooltip appears. 4:39
    We need to specify that we want only lowercase letters, 4:43
    not just that they're present. 4:47
    To do this, we can put a ^ at the beginning of 4:49
    the expression and a $ at the end. 4:53
    Now let's try it out in the browser. 4:59
    I'll refresh, And it works, 5:05
    great, next up, let's implement the password validator. 5:10

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up