1 00:00:00,430 --> 00:00:04,050 Open the workspace for this video to follow along with me, or 2 00:00:04,050 --> 00:00:06,640 download the project files below. 3 00:00:06,640 --> 00:00:10,040 The project we're starting with consists of three files, 4 00:00:10,040 --> 00:00:14,330 an HTML, CSS, and JavaScript file. 5 00:00:14,330 --> 00:00:17,070 Don't worry about the CSS for this course. 6 00:00:17,070 --> 00:00:20,065 It provides a few styles to help make the form look better. 7 00:00:20,065 --> 00:00:23,464 Index.html holds the form. 8 00:00:23,464 --> 00:00:28,068 The HTML file loads the JavaScript file where we'll be writing the code to 9 00:00:28,068 --> 00:00:29,710 validate the user input. 10 00:00:30,740 --> 00:00:35,220 The four lines of code at the top of app.js select and 11 00:00:35,220 --> 00:00:37,989 store the four text input variables. 12 00:00:39,250 --> 00:00:42,920 We'll use the next group of functions to define the validators. 13 00:00:42,920 --> 00:00:44,960 They will return true or false, 14 00:00:44,960 --> 00:00:47,910 depending on whether the string passed in is valid or not. 15 00:00:48,990 --> 00:00:52,600 The comments above each one state the validation rules will apply. 16 00:00:53,680 --> 00:00:57,000 Remember that the form also reformats the telephone number. 17 00:00:58,130 --> 00:01:04,220 The formatTelephone function will do that, we'll complete that later in this course. 18 00:01:04,220 --> 00:01:08,206 In addition, I've added a couple utility functions to help with this project. 19 00:01:08,206 --> 00:01:14,540 The showOrHide tooltip function either shows or hides the tooltip. 20 00:01:14,540 --> 00:01:18,060 This function accepts a Boolean value and an element. 21 00:01:18,060 --> 00:01:19,980 If the show parameter is true, 22 00:01:19,980 --> 00:01:26,690 it sets the element's CSS to display property to inherit, making it visible. 23 00:01:26,690 --> 00:01:29,700 Otherwise, it sets the display to none, hiding it. 24 00:01:30,730 --> 00:01:33,395 We'll use this function to show and hide the tooltips. 25 00:01:34,470 --> 00:01:39,480 Another help or function, createListener, simplifies creating event listeners for 26 00:01:39,480 --> 00:01:41,500 our validator functions. 27 00:01:41,500 --> 00:01:45,530 This function accepts one of the validator functions we'll be writing and 28 00:01:45,530 --> 00:01:47,760 produces an event listener. 29 00:01:47,760 --> 00:01:48,860 The listener shows or 30 00:01:48,860 --> 00:01:52,700 hides a tooltip based on whether the validator returns true or not. 31 00:01:53,840 --> 00:01:57,940 Notice this createListener function returns another function. 32 00:01:59,060 --> 00:02:02,190 The function it returns will be the actual listener, 33 00:02:02,190 --> 00:02:05,490 which you can see will accept an event object. 34 00:02:05,490 --> 00:02:09,450 This is known as a closure, and if it seems confusing, don't worry. 35 00:02:09,450 --> 00:02:13,370 You won't need to understand what's going on here to complete the course, 36 00:02:13,370 --> 00:02:17,430 which is designed to teach you how to use regular expressions. 37 00:02:17,430 --> 00:02:20,750 But if you're curious to know more, check the teacher's notes for 38 00:02:20,750 --> 00:02:26,180 a little more about this function, as well as a workshop on closures in JavaScript. 39 00:02:26,180 --> 00:02:27,120 At the bottom, 40 00:02:27,120 --> 00:02:32,500 each form input has an event listener provided by the createListener function. 41 00:02:32,500 --> 00:02:35,650 The event that triggers each listener is the input event. 42 00:02:35,650 --> 00:02:38,960 So every time the user types, their input is validated. 43 00:02:40,070 --> 00:02:43,410 Let's get started on validating the first input, the username. 44 00:02:44,590 --> 00:02:48,880 For this field, we only want to accept lowercase letters. 45 00:02:48,880 --> 00:02:50,600 We'll use the test method for this. 46 00:02:52,270 --> 00:02:56,840 Remember, the test method is called on a regular expression. 47 00:02:56,840 --> 00:03:01,450 So I'll start by writing a regular expression literal, which begins and 48 00:03:01,450 --> 00:03:02,480 ends with a slash. 49 00:03:03,672 --> 00:03:07,470 Normally, for letter characters, I might use a word character. 50 00:03:08,520 --> 00:03:13,190 But remember, this would also match numbers in uppercase characters. 51 00:03:13,190 --> 00:03:19,000 So to limit our matches to only include lowercase, we can use a character set, 52 00:03:19,000 --> 00:03:23,860 specifying a range from a-z. 53 00:03:23,860 --> 00:03:29,100 This only matches one character, so we'll need to specify that it can repeat. 54 00:03:29,100 --> 00:03:32,080 We could either use an asterisk or a plus for that. 55 00:03:32,080 --> 00:03:35,370 For this case, it doesn't matter, I'll just use a +. 56 00:03:35,370 --> 00:03:38,080 We want to return the result of calling match so 57 00:03:38,080 --> 00:03:41,330 our handler knows whether the input is valid. 58 00:03:41,330 --> 00:03:45,350 I'll return this expression, which will either be true or false. 59 00:03:50,537 --> 00:03:57,580 Oops, and we'll also need to supply the string that we're validating to test. 60 00:03:59,270 --> 00:04:02,040 I'll save this and refresh the browser. 61 00:04:04,240 --> 00:04:09,550 I'll type some lowercase letters, and we don't have any problem. 62 00:04:09,550 --> 00:04:13,952 Now I should a tooltip if I try to type an uppercase character, but 63 00:04:13,952 --> 00:04:15,400 it doesn't appear. 64 00:04:15,400 --> 00:04:17,430 Can you think of why? 65 00:04:17,430 --> 00:04:20,630 Go ahead and pause the video if you'd like to try to fix this on your own. 66 00:04:21,650 --> 00:04:24,940 The regular expression we're testing against is looking for 67 00:04:24,940 --> 00:04:29,130 the presence of lowercase letters in the input field. 68 00:04:29,130 --> 00:04:34,530 When I typed an uppercase character, there were still lowercase letters present. 69 00:04:34,530 --> 00:04:39,153 If I erase all the lowercase letters, 70 00:04:39,153 --> 00:04:43,550 You can see the tooltip appears. 71 00:04:43,550 --> 00:04:47,050 We need to specify that we want only lowercase letters, 72 00:04:47,050 --> 00:04:49,480 not just that they're present. 73 00:04:49,480 --> 00:04:53,701 To do this, we can put a ^ at the beginning of 74 00:04:53,701 --> 00:04:56,790 the expression and a $ at the end. 75 00:04:59,000 --> 00:05:00,720 Now let's try it out in the browser. 76 00:05:05,123 --> 00:05:10,848 I'll refresh, And it works, 77 00:05:10,848 --> 00:05:16,120 great, next up, let's implement the password validator.