1 00:00:00,700 --> 00:00:03,470 Our form submits a number to the Express app 2 00:00:03,470 --> 00:00:07,750 which processes the request with middleware and returns a result. 3 00:00:07,750 --> 00:00:11,140 But what happens if we give our app a word like four? 4 00:00:13,288 --> 00:00:19,260 The parseFloat method converts text into the value NaN or not a number. 5 00:00:19,260 --> 00:00:23,609 Submitting an empty form field also results in not a number. 6 00:00:23,609 --> 00:00:28,020 Seeing NaN on the resulting page would probably confuse our users. 7 00:00:28,020 --> 00:00:30,010 Instead of showing the user NaN, 8 00:00:30,010 --> 00:00:33,498 let's throw an error when the user submits invalid data. 9 00:00:33,498 --> 00:00:38,160 In our middleware, parseFloat produces the NaN value. 10 00:00:38,160 --> 00:00:41,530 So let's validate the input right after this line. 11 00:00:41,530 --> 00:00:47,320 We can check if the value is NaN by using the function isNaN. 12 00:00:47,320 --> 00:00:51,270 If the value we pass in is not a number, the function returns true. 13 00:00:52,740 --> 00:00:57,016 We'll add an if statement and 14 00:00:57,016 --> 00:01:00,783 use isNaN and pass in num. 15 00:01:00,783 --> 00:01:03,453 Inside, we'll create an error object. 16 00:01:09,042 --> 00:01:16,480 And add a description string, Submitted value is not a number. 17 00:01:19,790 --> 00:01:21,880 Then we can pass the error to next. 18 00:01:24,860 --> 00:01:27,740 One little quirk of next we should talk about. 19 00:01:27,740 --> 00:01:31,250 It doesn't actually close out the middleware function. 20 00:01:31,250 --> 00:01:34,270 After it's called, the middleware continues to run. 21 00:01:34,270 --> 00:01:40,260 And when next is called again down here, Express throws an error. 22 00:01:40,260 --> 00:01:42,490 That kind of bug can be hard to trace. 23 00:01:42,490 --> 00:01:47,330 So let's avoid that by adding return before next up here. 24 00:01:50,480 --> 00:01:52,850 That will make sure the function ends right here. 25 00:01:53,910 --> 00:01:57,750 Let's save this and check it out in the browser. 26 00:01:57,750 --> 00:02:00,090 If we refresh, whoa! 27 00:02:01,250 --> 00:02:04,400 We're getting an error before the form even renders. 28 00:02:04,400 --> 00:02:06,020 Can you spot the problem? 29 00:02:06,020 --> 00:02:07,540 I'll give you a hint. 30 00:02:07,540 --> 00:02:10,240 It has to do with this value right here. 31 00:02:10,240 --> 00:02:14,072 Pause the video and think about it for a moment if you want to. 32 00:02:14,072 --> 00:02:18,432 Because we're not submitting a form with our GET request, this value, 33 00:02:18,432 --> 00:02:21,650 the number property, is undefined. 34 00:02:21,650 --> 00:02:25,456 And just as a little experiment, let's open up Chrome DevTools and 35 00:02:25,456 --> 00:02:27,270 call parseFloat on undefined. 36 00:02:31,238 --> 00:02:33,520 We get not a number. 37 00:02:33,520 --> 00:02:36,010 That means our error will get thrown. 38 00:02:36,010 --> 00:02:41,353 So at the top of this function, 39 00:02:41,353 --> 00:02:51,021 let's say, if request.body.number is undefined. 40 00:02:51,021 --> 00:02:52,945 Don't continue on. 41 00:02:52,945 --> 00:02:55,199 Move on to the next middleware function. 42 00:02:58,365 --> 00:03:01,850 That way, GET requests will render the form. 43 00:03:01,850 --> 00:03:07,810 But when our form defines the number property in POST requests, the request 44 00:03:07,810 --> 00:03:11,380 of the rest of this function will spring into action the way we want it to. 45 00:03:12,960 --> 00:03:17,720 Testing in the browser, we see that our form renders now. 46 00:03:17,720 --> 00:03:21,140 And if we enter a numeric value, we get the right answer. 47 00:03:22,260 --> 00:03:28,380 And if we enter an invalid value like an empty string, our error is triggered. 48 00:03:28,380 --> 00:03:30,740 This error is still not very user-friendly, but 49 00:03:30,740 --> 00:03:34,780 it's give us a little practice with throwing an error with middleware. 50 00:03:34,780 --> 00:03:39,010 You could take this further if you wanted and send the user something less scary. 51 00:03:39,010 --> 00:03:40,650 But I'll let you work that out on your own. 52 00:03:41,790 --> 00:03:46,720 Next, let's have a look at packaging up our middleware into a module and 53 00:03:46,720 --> 00:03:47,940 making it configurable.