1 00:00:02,130 --> 00:00:05,350 Forms might seem simple and trivial, 2 00:00:05,350 --> 00:00:06,850 but they are not. 3 00:00:06,850 --> 00:00:08,960 Forms can actually be complex 4 00:00:08,960 --> 00:00:11,200 from a developer's point of view 5 00:00:11,200 --> 00:00:13,420 because forms and their inputs 6 00:00:13,420 --> 00:00:17,500 can assume a broad variety of different states. 7 00:00:17,500 --> 00:00:21,640 One or more inputs could be invalid or valid. 8 00:00:21,640 --> 00:00:25,260 And these are only two states it's even possible 9 00:00:25,260 --> 00:00:29,040 that you could have forms where the state is unknown 10 00:00:29,040 --> 00:00:32,800 because maybe you have some asynchronous validation 11 00:00:32,800 --> 00:00:34,670 where you need to send the request 12 00:00:34,670 --> 00:00:37,750 to a server behind the scenes to check something 13 00:00:37,750 --> 00:00:40,540 to find out if a certain value is available. 14 00:00:40,540 --> 00:00:43,180 Let's say an email address to then find out 15 00:00:43,180 --> 00:00:45,410 whether the input is valid or not. 16 00:00:45,410 --> 00:00:48,310 So it could be even more complex than shown here 17 00:00:48,310 --> 00:00:51,850 but even here we have two states and you must not forget 18 00:00:51,850 --> 00:00:55,070 that these states valid and invalid, 19 00:00:55,070 --> 00:00:58,180 don't just apply to the overall form, 20 00:00:58,180 --> 00:01:02,350 but to every individual input in the form 21 00:01:02,350 --> 00:01:04,770 and extend a sum off the states 22 00:01:04,770 --> 00:01:08,650 of those inputs that make up the overall form state. 23 00:01:08,650 --> 00:01:12,040 Now, when a form and its inputs are invalid 24 00:01:12,040 --> 00:01:16,270 you might want to output input specific error messages 25 00:01:16,270 --> 00:01:19,030 and highlight the problematic inputs. 26 00:01:19,030 --> 00:01:22,030 And you also want to ensure that the form can't be submitted 27 00:01:22,030 --> 00:01:26,100 or saved if one or more inputs are invalid. 28 00:01:26,100 --> 00:01:28,260 If the inputs are valid, though 29 00:01:28,260 --> 00:01:29,810 you of course want to make sure 30 00:01:29,810 --> 00:01:32,470 that it can be submitted and saved. 31 00:01:32,470 --> 00:01:36,000 Now, when we dive into showing error messages 32 00:01:36,000 --> 00:01:38,390 and highlighting invalid inputs 33 00:01:38,390 --> 00:01:41,010 things get even more complex 34 00:01:41,010 --> 00:01:44,520 because to question then is when to validate, 35 00:01:44,520 --> 00:01:46,960 when should you check the user input? 36 00:01:46,960 --> 00:01:49,700 You can validate the user input 37 00:01:49,700 --> 00:01:52,540 when the form is submitted as a whole 38 00:01:52,540 --> 00:01:55,940 you can also check the value entered by a user 39 00:01:55,940 --> 00:01:58,610 once an input loses focus 40 00:01:58,610 --> 00:02:00,270 to then check what the user did 41 00:02:00,270 --> 00:02:03,990 enter the error and find out if it is valid 42 00:02:03,990 --> 00:02:06,680 and you can of course also do that on every keystroke 43 00:02:06,680 --> 00:02:09,403 or on every change to user makes to an input. 44 00:02:10,510 --> 00:02:12,340 Now, when you validate 45 00:02:12,340 --> 00:02:14,860 once the form is submitted as a whole, 46 00:02:14,860 --> 00:02:18,410 you of course allow the user to enter a valid value 47 00:02:18,410 --> 00:02:21,770 before possibly warning him or her. 48 00:02:21,770 --> 00:02:24,780 That means if the user starts typing in 49 00:02:24,780 --> 00:02:28,290 let's say the email field, you don't tell the user 50 00:02:28,290 --> 00:02:30,500 that the entered email address is wrong 51 00:02:30,500 --> 00:02:33,550 before the user even had a chance of entering one. 52 00:02:33,550 --> 00:02:34,630 So that's good. 53 00:02:34,630 --> 00:02:36,640 You wait until the user is done 54 00:02:36,640 --> 00:02:39,570 and then you possibly show an error. 55 00:02:39,570 --> 00:02:43,890 So this avoids unnecessary warnings, but as a downside 56 00:02:43,890 --> 00:02:47,640 the feedback might come a little bit too late. 57 00:02:47,640 --> 00:02:49,750 If I press submit 58 00:02:49,750 --> 00:02:52,080 and you then tell me that something's wrong, 59 00:02:52,080 --> 00:02:53,140 I have to go back 60 00:02:53,140 --> 00:02:55,350 to that input where something was wrong 61 00:02:55,350 --> 00:02:57,440 and enter my value again. 62 00:02:57,440 --> 00:02:58,730 It's not the end of the world, 63 00:02:58,730 --> 00:03:01,470 but maybe not the final user experience 64 00:03:01,470 --> 00:03:02,863 we might want to offer. 65 00:03:03,890 --> 00:03:07,180 Now, when we validate the input, when it loses focus 66 00:03:07,180 --> 00:03:09,610 the good thing also is that we allow the user 67 00:03:09,610 --> 00:03:12,940 to enter a valid value before warning him or her 68 00:03:12,940 --> 00:03:16,000 just as when we waited for the overall form. 69 00:03:16,000 --> 00:03:19,070 But we already do show an error then 70 00:03:19,070 --> 00:03:22,410 once the user is done with that specific input. 71 00:03:22,410 --> 00:03:25,280 So we don't wait for the overall form submission 72 00:03:25,280 --> 00:03:27,230 but we just wait until the user is done 73 00:03:27,230 --> 00:03:29,370 with one specific input. 74 00:03:29,370 --> 00:03:32,360 This can be very useful for untouched forms. 75 00:03:32,360 --> 00:03:35,320 So where do you user hasn't entered anything yet. 76 00:03:35,320 --> 00:03:38,320 The downside with this approach, however, 77 00:03:38,320 --> 00:03:41,620 if you only validate on losing focus 78 00:03:41,620 --> 00:03:44,550 is that if an input was invalid 79 00:03:44,550 --> 00:03:47,460 so if the user did already enter something invalid 80 00:03:47,460 --> 00:03:49,550 and now comes back to fix it 81 00:03:49,550 --> 00:03:52,780 you don't tell the user if it's now valid or not 82 00:03:52,780 --> 00:03:56,360 until he or she is done entering an input. 83 00:03:56,360 --> 00:04:00,360 That's where on keystroke validation might be better. 84 00:04:00,360 --> 00:04:03,390 There you provide direct feedback to the user 85 00:04:03,390 --> 00:04:06,920 on whether the input is valid or not on every keystroke 86 00:04:07,880 --> 00:04:10,480 but as a downside, you here warn the user 87 00:04:10,480 --> 00:04:15,280 before he or she even had a chance of entering valid values. 88 00:04:15,280 --> 00:04:18,890 So if you visit a form for the first time 89 00:04:18,890 --> 00:04:20,980 and you haven't entered anything 90 00:04:20,980 --> 00:04:23,780 you would be greeted with tons of errors 91 00:04:23,780 --> 00:04:26,140 if we only validate on keystroke 92 00:04:26,140 --> 00:04:29,180 because initially everything is invalid, of course 93 00:04:29,180 --> 00:04:31,540 and we haven't given a user any chance 94 00:04:31,540 --> 00:04:33,670 of entering anything valid. 95 00:04:33,670 --> 00:04:35,790 If on the other hand we combine this 96 00:04:35,790 --> 00:04:37,990 with the other methods somehow 97 00:04:37,990 --> 00:04:40,300 and we only validate on keystroke 98 00:04:40,300 --> 00:04:43,080 if the input was invalid before 99 00:04:43,080 --> 00:04:45,990 then we can provide direct feedback 100 00:04:45,990 --> 00:04:49,520 and therefore tell the user, once the input is valid. 101 00:04:49,520 --> 00:04:53,450 And if this is all a little abstract, that's no problem. 102 00:04:53,450 --> 00:04:56,550 We're now going to explore these different approaches 103 00:04:56,550 --> 00:04:58,860 in great detail in this module. 104 00:04:58,860 --> 00:05:01,870 And we're going to see how things behave 105 00:05:01,870 --> 00:05:03,710 and how we can fine-tune this 106 00:05:03,710 --> 00:05:06,403 to come up with the best possible solution.