1 00:00:02,050 --> 00:00:03,490 Now up to this point 2 00:00:03,490 --> 00:00:05,260 we're still on the left side 3 00:00:05,260 --> 00:00:06,410 of this slide. 4 00:00:06,410 --> 00:00:08,190 We are always validating 5 00:00:08,190 --> 00:00:10,450 when a form is submitted. 6 00:00:10,450 --> 00:00:11,750 We're not validating 7 00:00:11,750 --> 00:00:14,150 when an input lost focus 8 00:00:14,150 --> 00:00:15,980 or on every keystroke. 9 00:00:15,980 --> 00:00:17,720 Now, of course, that could be fine. 10 00:00:17,720 --> 00:00:18,920 That could be exactly 11 00:00:18,920 --> 00:00:20,800 the behavior you want 12 00:00:20,800 --> 00:00:22,010 but let's now explore 13 00:00:22,010 --> 00:00:23,450 why we still might want 14 00:00:23,450 --> 00:00:25,260 to tweak that behavior 15 00:00:25,260 --> 00:00:27,890 in regards to certain aspects. 16 00:00:27,890 --> 00:00:29,510 We have the entered name, 17 00:00:29,510 --> 00:00:30,860 is valid state, 18 00:00:30,860 --> 00:00:33,030 the entered name, value state 19 00:00:33,030 --> 00:00:34,020 so to say 20 00:00:34,020 --> 00:00:35,990 and the entered name, touch state 21 00:00:36,890 --> 00:00:38,280 and still this behavior 22 00:00:38,280 --> 00:00:39,410 isn't fully there 23 00:00:39,410 --> 00:00:40,733 where I want it to be. 24 00:00:41,910 --> 00:00:43,700 It's good that on submission 25 00:00:43,700 --> 00:00:45,530 it now shows us this error 26 00:00:45,530 --> 00:00:46,363 but for example, 27 00:00:46,363 --> 00:00:47,760 it doesn't show as an error 28 00:00:47,760 --> 00:00:49,350 if I click in there, 29 00:00:49,350 --> 00:00:51,050 maybe type something 30 00:00:51,050 --> 00:00:52,430 but then remove everything 31 00:00:52,430 --> 00:00:54,010 and click out of there. 32 00:00:54,010 --> 00:00:55,920 We know that this is invalid 33 00:00:55,920 --> 00:00:58,110 because an empty input is not allowed 34 00:00:58,110 --> 00:00:59,540 but we only show the user 35 00:00:59,540 --> 00:01:00,390 this error message 36 00:01:00,390 --> 00:01:02,250 when submit is clicked 37 00:01:02,250 --> 00:01:04,060 and that might be too late. 38 00:01:04,060 --> 00:01:04,893 That might not be 39 00:01:04,893 --> 00:01:07,230 the best possible user experience. 40 00:01:07,230 --> 00:01:08,280 I think it's better 41 00:01:08,280 --> 00:01:10,330 to show the user this error 42 00:01:10,330 --> 00:01:11,720 when the user had a chance 43 00:01:11,720 --> 00:01:13,020 of working on this. 44 00:01:13,020 --> 00:01:14,090 So if I click in there 45 00:01:14,090 --> 00:01:15,170 and click out of there 46 00:01:15,170 --> 00:01:16,570 and I leave it empty 47 00:01:16,570 --> 00:01:18,130 I wanna see that error 48 00:01:18,130 --> 00:01:19,380 that tells me that this 49 00:01:19,380 --> 00:01:20,850 is then not allowed 50 00:01:20,850 --> 00:01:22,505 because I had a chance of editing it, 51 00:01:22,505 --> 00:01:24,160 I didn't do that. 52 00:01:24,160 --> 00:01:26,690 Now I should probably get that error 53 00:01:26,690 --> 00:01:27,810 that tells me, 54 00:01:27,810 --> 00:01:29,713 hey you need to enter something here. 55 00:01:30,920 --> 00:01:32,790 So therefore we might want to also 56 00:01:32,790 --> 00:01:36,430 validate on blur as it's called, 57 00:01:36,430 --> 00:01:39,400 which means when the input loses focus 58 00:01:39,400 --> 00:01:40,944 and that's not too difficult 59 00:01:40,944 --> 00:01:43,410 besides the on change handler 60 00:01:43,410 --> 00:01:46,180 we can also add the on blur handler 61 00:01:46,180 --> 00:01:47,770 and that's a built in event 62 00:01:47,770 --> 00:01:49,341 which fires whenever 63 00:01:49,341 --> 00:01:51,433 this input loses focus. 64 00:01:52,330 --> 00:01:54,566 Hence we can add a new function here. 65 00:01:54,566 --> 00:01:59,566 Let's say the name input blur handler 66 00:02:00,070 --> 00:02:01,820 where we also get the default event 67 00:02:02,670 --> 00:02:05,210 and then I wanna bind this 68 00:02:05,210 --> 00:02:07,550 name input blur handler 69 00:02:07,550 --> 00:02:09,113 to my input here. 70 00:02:10,190 --> 00:02:12,730 Now in the name input blur handler, 71 00:02:12,730 --> 00:02:15,460 I wanna do two things 72 00:02:15,460 --> 00:02:17,160 for one, I wanna set 73 00:02:17,160 --> 00:02:19,760 entered name touch to true 74 00:02:19,760 --> 00:02:22,090 because if our input loses focus, 75 00:02:22,090 --> 00:02:23,910 it definitely was touched. 76 00:02:23,910 --> 00:02:26,140 The user had a chance of working on it 77 00:02:27,130 --> 00:02:28,080 but in addition, 78 00:02:28,080 --> 00:02:30,730 we might want to start validation here. 79 00:02:30,730 --> 00:02:34,130 So we might wanna run this logic again 80 00:02:34,130 --> 00:02:36,840 so we can copy this code here 81 00:02:36,840 --> 00:02:38,170 and add that in the name 82 00:02:38,170 --> 00:02:39,653 and put blur handler. 83 00:02:40,530 --> 00:02:42,360 So did we check the entered name 84 00:02:42,360 --> 00:02:43,193 which we update 85 00:02:43,193 --> 00:02:44,910 with every keystroke still 86 00:02:44,910 --> 00:02:46,090 and we set entered name 87 00:02:46,090 --> 00:02:47,490 is valid, false 88 00:02:47,490 --> 00:02:49,750 if that name is invalid. 89 00:02:49,750 --> 00:02:52,050 Now we do have code duplication here 90 00:02:52,050 --> 00:02:53,330 and we'll take care about that 91 00:02:53,330 --> 00:02:54,320 in a second 92 00:02:54,320 --> 00:02:55,153 but for the moment 93 00:02:55,153 --> 00:02:57,640 let's take this approach here. 94 00:02:57,640 --> 00:02:58,730 Let's duplicate the code. 95 00:02:58,730 --> 00:03:00,780 It's fine for a second. 96 00:03:00,780 --> 00:03:02,070 So now with that, 97 00:03:02,070 --> 00:03:03,130 if I click in there 98 00:03:03,130 --> 00:03:04,340 and click out of there, 99 00:03:04,340 --> 00:03:06,270 I also get my warning here 100 00:03:06,270 --> 00:03:07,230 which I would say 101 00:03:07,230 --> 00:03:08,950 is a better user experience 102 00:03:10,090 --> 00:03:12,940 but now we maybe want to 103 00:03:12,940 --> 00:03:14,230 give the user a chance 104 00:03:14,230 --> 00:03:15,790 of fixing this error 105 00:03:15,790 --> 00:03:17,300 and if I now start typing here 106 00:03:17,300 --> 00:03:18,170 it would be great 107 00:03:18,170 --> 00:03:19,822 if this error disappears 108 00:03:19,822 --> 00:03:22,710 as soon as I entered a valid value. 109 00:03:22,710 --> 00:03:24,620 So that I as a user know, 110 00:03:24,620 --> 00:03:27,400 once I did reach a valid value, 111 00:03:27,400 --> 00:03:30,210 once I can stop typing for example 112 00:03:30,210 --> 00:03:31,750 and that's why we also 113 00:03:31,750 --> 00:03:33,230 might want to validate 114 00:03:33,230 --> 00:03:35,400 on every keystroke now 115 00:03:35,400 --> 00:03:37,550 but only in combination with 116 00:03:37,550 --> 00:03:39,130 the other validation steps 117 00:03:39,130 --> 00:03:41,240 we integrated before 118 00:03:41,240 --> 00:03:42,580 because just validating 119 00:03:42,580 --> 00:03:44,170 on every keystroke alone 120 00:03:44,170 --> 00:03:45,960 would probably not be good. 121 00:03:45,960 --> 00:03:47,580 We would be (indistinct) errors 122 00:03:47,580 --> 00:03:49,860 at users without them having a chance 123 00:03:49,860 --> 00:03:52,260 of providing something valid first 124 00:03:52,260 --> 00:03:53,970 but now that we do actually 125 00:03:53,970 --> 00:03:55,500 allow the user to provide 126 00:03:55,500 --> 00:03:57,050 a valid value first, 127 00:03:57,050 --> 00:03:59,930 by listening to the lost focus 128 00:03:59,930 --> 00:04:01,260 and the form submission. 129 00:04:01,260 --> 00:04:02,790 Now that we're doing that, 130 00:04:02,790 --> 00:04:04,250 we also wanna give the user 131 00:04:04,250 --> 00:04:06,890 a chance of getting immediate feedback, 132 00:04:06,890 --> 00:04:09,290 direct feedback on every keystroke 133 00:04:09,290 --> 00:04:10,810 when it comes to fixing 134 00:04:10,810 --> 00:04:12,200 that invalid value 135 00:04:12,200 --> 00:04:14,050 so that's what we're going to do now.