1 00:00:00,240 --> 00:00:00,570 All right. 2 00:00:00,600 --> 00:00:02,790 And now let's finally wire everything up. 3 00:00:03,240 --> 00:00:05,250 We're in the register. 4 00:00:05,520 --> 00:00:09,510 I want to spread the word if one of the values is missing. 5 00:00:10,020 --> 00:00:13,800 And first of all, we wanted to remember we have the handle change function. 6 00:00:14,280 --> 00:00:15,930 And what are we looking for there? 7 00:00:16,170 --> 00:00:17,370 We're looking forward event. 8 00:00:18,060 --> 00:00:25,290 Now, more specifically, each and every time we're going to be typing something in input, we can set 9 00:00:25,290 --> 00:00:25,980 the values. 10 00:00:26,370 --> 00:00:31,080 Now, since we have the object, we want to return all the values that are in the object. 11 00:00:31,500 --> 00:00:38,970 And since we have access to event target and then more specifically name and then the value, I want 12 00:00:38,970 --> 00:00:44,220 to dynamically set that property with this value in the object. 13 00:00:44,760 --> 00:00:51,840 Now, if you're somewhat iffy on this syntax, please follow this link where I explain everything in 14 00:00:51,840 --> 00:00:52,470 great detail. 15 00:00:52,500 --> 00:00:58,950 Basically, this is one of my JavaScript Nuggets video where I cover what are the dynamic object keys 16 00:00:59,250 --> 00:01:00,780 and why we would want to use them. 17 00:01:01,110 --> 00:01:04,349 Now, once we're done with that, once we can actually. 18 00:01:05,239 --> 00:01:10,610 Change the state values in such a way when we want to get the display alert function. 19 00:01:10,940 --> 00:01:13,190 And this is the case where I'm going to show you the code. 20 00:01:13,770 --> 00:01:20,000 Just try to think that display alert is in the app context, correct? 21 00:01:20,510 --> 00:01:22,100 And we already have ActionScript. 22 00:01:22,340 --> 00:01:23,720 We're already getting two hours. 23 00:01:24,020 --> 00:01:25,820 So now we just need to add that function. 24 00:01:26,290 --> 00:01:27,740 Come on, submit. 25 00:01:28,100 --> 00:01:32,000 We're still preventing the default, so we don't want to get the default behavior. 26 00:01:32,510 --> 00:01:37,850 But then in there, we want access, name, email, password and remember, and then we want to check 27 00:01:37,850 --> 00:01:38,960 whether the values are there. 28 00:01:39,740 --> 00:01:45,800 And technically, you can make an argument that I can check for email if password doesn't exist or if 29 00:01:45,800 --> 00:01:46,130 name. 30 00:01:46,130 --> 00:01:49,490 But keep in mind also that I only care about the name. 31 00:01:49,970 --> 00:01:57,260 If the user is not a member, remember if I'm just logging in, I'm looking for email and password. 32 00:01:57,530 --> 00:01:57,920 That's it. 33 00:01:58,370 --> 00:02:02,600 I don't really care about the name, since the input is actually not here at all. 34 00:02:02,960 --> 00:02:08,780 So therefore, I'm going to go here with one more condition where I'm going to say, if it's not a member, 35 00:02:08,990 --> 00:02:09,860 then I want the name. 36 00:02:10,250 --> 00:02:11,240 Hopefully this makes sense. 37 00:02:11,510 --> 00:02:15,200 And if that is the case, then we want to run the display alert. 38 00:02:15,560 --> 00:02:18,140 So if everything is correct, we should see that alert. 39 00:02:18,500 --> 00:02:18,920 Correct? 40 00:02:19,580 --> 00:02:20,190 Right. 41 00:02:20,240 --> 00:02:24,530 Eventually, we also want to log the virus if everything is correct. 42 00:02:24,740 --> 00:02:26,120 So let's try this out. 43 00:02:26,690 --> 00:02:33,730 Or first, let's go to a register that's keep on scrolling and then remember the handle change. 44 00:02:33,820 --> 00:02:35,330 Remember how we will logging? 45 00:02:35,780 --> 00:02:39,560 So now what do we want to do is to go with set values. 46 00:02:40,130 --> 00:02:44,000 And then since I don't want to overwrite the values, we're going to go with dot, dot, dot and then 47 00:02:44,090 --> 00:02:44,630 values. 48 00:02:44,960 --> 00:02:52,400 So that gets me all the current values that are in the state comma and alerts dynamically access the 49 00:02:52,400 --> 00:02:56,810 property that is equal to a name of the input. 50 00:02:57,170 --> 00:03:00,020 So that was the whole point why we were passing them in. 51 00:03:00,230 --> 00:03:04,970 Notice how they match exactly what we have in the state and the way we do that we go here. 52 00:03:04,970 --> 00:03:06,500 We have a square brackets. 53 00:03:06,990 --> 00:03:11,960 I'm just passing in as event target and then name. 54 00:03:12,110 --> 00:03:16,040 Now that will be equal to event, target and value. 55 00:03:16,100 --> 00:03:22,340 Again, if you need a refresher on why you would want to access the keys in such a way, please reference 56 00:03:22,340 --> 00:03:23,600 the JavaScript Nuggets video. 57 00:03:24,080 --> 00:03:26,870 And with this in place, we can actually test that out quickly. 58 00:03:27,230 --> 00:03:32,960 So let me navigate here the big screen here and then notice if I'm going to be typing something on email, 59 00:03:33,620 --> 00:03:34,790 I'm going to be updating mistake. 60 00:03:35,030 --> 00:03:35,390 Correct? 61 00:03:35,720 --> 00:03:38,690 So if I'm going to be typing something in the password. 62 00:03:39,110 --> 00:03:41,510 Also going to be updating that volume state. 63 00:03:41,840 --> 00:03:47,270 And the same goes for remember, of course, because that one we already set up before. 64 00:03:47,840 --> 00:03:53,210 So once we have this functionality in place now, we're just needs your work on the submit. 65 00:03:53,420 --> 00:03:59,930 Like I said, we want to set up the condition where I want to check for the values, and if one of them 66 00:03:59,930 --> 00:04:05,000 is missing, then we'll throw the display right now before we can do anything. 67 00:04:05,300 --> 00:04:07,700 Remember, we need to get it from the context. 68 00:04:07,880 --> 00:04:14,540 So we're going to go after Charlotte and we'll go with the display, an alert about the function as 69 00:04:14,540 --> 00:04:17,959 long as we're passing it from the context we should be. 70 00:04:18,709 --> 00:04:20,060 So let me save this one. 71 00:04:20,459 --> 00:04:23,660 And what I'm looking for here is the on submit. 72 00:04:23,870 --> 00:04:27,680 And then like I said, let's first grab those values from the state. 73 00:04:27,830 --> 00:04:28,910 Let's structure them. 74 00:04:29,090 --> 00:04:33,320 I think it's going to be faster and then let's check for the empty ones. 75 00:04:33,320 --> 00:04:41,750 So if your name more for email, I am looking for a password and also is member because depending on 76 00:04:41,750 --> 00:04:46,700 this value, we will call a specific function that is coming up for now. 77 00:04:47,120 --> 00:04:53,480 Now, once I have pulled them out, when I want to go with if and then if the email is missing, then 78 00:04:53,480 --> 00:04:54,470 I want to throw this one. 79 00:04:54,770 --> 00:04:59,150 Same goes for password, so just say your password. 80 00:04:59,420 --> 00:05:05,240 And then like I said, I also want to do the same thing with the name, but only if it's not a member. 81 00:05:05,540 --> 00:05:10,910 So say here if it's a member, and then I'll go with the name. 82 00:05:11,360 --> 00:05:16,520 So only if the name is missing when we want to display the alert, and now it's called a function. 83 00:05:16,700 --> 00:05:19,250 Notice how we don't need to do anything and I'll return it. 84 00:05:19,850 --> 00:05:22,640 So I'll say, if this is the case, let's return now. 85 00:05:22,790 --> 00:05:25,340 If it's not a case, let's log the values. 86 00:05:25,790 --> 00:05:27,290 Let's say here values. 87 00:05:27,500 --> 00:05:29,540 And now let's start out again on a big screen. 88 00:05:29,690 --> 00:05:31,880 Since we have a little bit more room over there. 89 00:05:32,330 --> 00:05:33,470 So I have a console. 90 00:05:34,250 --> 00:05:39,200 If everything is correct, once I click, yep, I have the error. 91 00:05:39,260 --> 00:05:39,650 Why? 92 00:05:39,980 --> 00:05:42,800 Well, because we haven't provided the values. 93 00:05:42,830 --> 00:05:49,820 However, if I'm going to go here with something, let's just say email and learn some kind of password. 94 00:05:49,820 --> 00:05:52,370 Now, I believe we'll have to add here, at least. 95 00:05:53,060 --> 00:05:55,030 Otherwise, there's going to be a bug. 96 00:05:55,040 --> 00:05:57,860 And if I click, everything is going to be fine. 97 00:05:57,870 --> 00:05:58,190 Why? 98 00:05:58,550 --> 00:06:00,770 Well, because I have is member true. 99 00:06:01,130 --> 00:06:04,490 So this is going to be a scenario if the user. 100 00:06:04,580 --> 00:06:06,680 Is already a member now. 101 00:06:06,920 --> 00:06:08,330 We still have the alert. 102 00:06:08,540 --> 00:06:12,320 We'll work on that one next where we actually dynamically hide it. 103 00:06:12,740 --> 00:06:20,180 But let me just start out one more time where if the user is not a member and I try to do the same thing 104 00:06:20,510 --> 00:06:28,940 where basically I'm going to go with email at Gmail and then provide some kind of password and let's 105 00:06:28,940 --> 00:06:38,900 try to submit now have all the values and only if I either switch to a log in or if I provide the actual 106 00:06:38,900 --> 00:06:40,980 name, then everything is going to be fine. 107 00:06:41,000 --> 00:06:43,070 Again, this alert will stay for now. 108 00:06:43,640 --> 00:06:49,310 We haven't had to know that yet, but if everything is correct, notice how now we are correctly console 109 00:06:49,310 --> 00:06:50,240 logging everything. 110 00:06:50,630 --> 00:06:54,710 And with this in place now, we can start working on high alert functionality.