1 00:00:00,580 --> 00:00:02,590 As we've seen in earlier videos, 2 00:00:02,590 --> 00:00:07,630 our web app is validating user submitted data and generating error messages. 3 00:00:07,630 --> 00:00:10,720 But we're not displaying them on our ad entry view. 4 00:00:10,720 --> 00:00:13,110 Let's open and update our view so 5 00:00:13,110 --> 00:00:18,130 users can see error messages when they submit and complete or invalid data. 6 00:00:18,130 --> 00:00:20,910 We can add a validation summary section to our view 7 00:00:20,910 --> 00:00:25,140 by calling the ValidationSummary HTML helper method. 8 00:00:25,140 --> 00:00:29,378 I'll place the validation summary section between our heading and form. 9 00:00:29,378 --> 00:00:33,370 @Html.ValidationSummary. 10 00:00:33,370 --> 00:00:35,970 We can also display validation messages for 11 00:00:35,970 --> 00:00:40,882 individual fields by calling the validation message for HTML helper method. 12 00:00:40,882 --> 00:00:45,150 I'll update the activity field so that any validation messages for 13 00:00:45,150 --> 00:00:48,295 that field will display right below the drop down list, 14 00:00:48,295 --> 00:00:58,295 @Html.ValidationMessage(m=>m.ActivityID). 15 00:01:00,660 --> 00:01:02,980 Now let's run the app and test our view. 16 00:01:04,050 --> 00:01:04,914 Go ahead and save the form. 17 00:01:08,152 --> 00:01:11,390 And now we can see our validation messages. 18 00:01:11,390 --> 00:01:15,060 Notice how the Activity field required validation message 19 00:01:15,060 --> 00:01:18,710 is displayed both in the summary section and at the field level. 20 00:01:21,860 --> 00:01:25,340 There are two approaches, or strategies, that we could use for 21 00:01:25,340 --> 00:01:27,310 displaying our validation messages. 22 00:01:28,650 --> 00:01:33,570 Just use the summary section so all of our messages are displayed at the top of our 23 00:01:33,570 --> 00:01:39,180 form, or a combination of the summary section and field level messages. 24 00:01:39,180 --> 00:01:43,430 We shouldn't use field level messages by itself as it's possible for 25 00:01:43,430 --> 00:01:46,420 a message to not be associated with a field. 26 00:01:46,420 --> 00:01:50,260 So we need the summary section to display those global messages. 27 00:01:50,260 --> 00:01:52,890 If we're going to display field level messages, 28 00:01:52,890 --> 00:01:57,170 we can configure the summary section to only display global messages. 29 00:01:57,170 --> 00:02:01,600 To see this in action, let's start with adding a global validation message. 30 00:02:01,600 --> 00:02:05,061 Go ahead and stop the app and open the EntriesController class. 31 00:02:10,609 --> 00:02:13,760 Then navigate to the add post action method. 32 00:02:21,938 --> 00:02:25,270 I'll add a call to the model state add model error method, 33 00:02:25,270 --> 00:02:27,806 just above our duration field validation. 34 00:02:27,806 --> 00:02:34,580 ModelState.AddModelError then an empty string for 35 00:02:34,580 --> 00:02:40,170 our key to make this message global, then our message itself, 36 00:02:40,170 --> 00:02:44,700 this is a global message. 37 00:02:44,700 --> 00:02:49,780 For the first parameter, be sure to pass in an empty string instead of null. 38 00:02:49,780 --> 00:02:53,760 Passing in null will cause an exception to be thrown when calling the add 39 00:02:53,760 --> 00:02:55,170 model error method. 40 00:02:55,170 --> 00:02:58,660 Let's switch to Word view and update our summary section so 41 00:02:58,660 --> 00:03:01,340 that it only displays global messages. 42 00:03:01,340 --> 00:03:06,090 We can do that by passing in true for the exclude property errors parameter. 43 00:03:06,090 --> 00:03:07,886 Now let's run our app and save the form. 44 00:03:13,231 --> 00:03:16,934 Here's our global message in the summary section and 45 00:03:16,934 --> 00:03:21,960 the activity field message, but we're missing the duration message. 46 00:03:23,280 --> 00:03:28,400 The reason for this is simple, we didn't add a call to the validation message for 47 00:03:28,400 --> 00:03:30,900 HTML helper method for that field. 48 00:03:30,900 --> 00:03:34,200 So make sure that if you aren't going to display field level messages 49 00:03:34,200 --> 00:03:39,430 in the summary section, that you update each field to display its own messages. 50 00:03:39,430 --> 00:03:41,620 I'm going to just use the summary section. 51 00:03:41,620 --> 00:03:46,230 So, I'll remove the parameter from the validation summary method call and 52 00:03:46,230 --> 00:03:49,988 completely remove this validation message for method call. 53 00:03:53,009 --> 00:03:54,564 Let's also stop the app and 54 00:03:54,564 --> 00:03:58,630 remove from the controller our temporary global validation message. 55 00:04:00,100 --> 00:04:04,210 Before we wrap up this video, let's make a couple of changes to our summary section. 56 00:04:05,790 --> 00:04:09,720 First, let's add a message to display at the start of the summary 57 00:04:09,720 --> 00:04:12,610 by supplying a value for the message parameter. 58 00:04:12,610 --> 00:04:17,520 The following errors were found. 59 00:04:17,520 --> 00:04:22,580 Then, let's update the styling by passing in an anonymous object. 60 00:04:22,580 --> 00:04:26,070 With the class property for the second parameter, 61 00:04:26,070 --> 00:04:31,530 we can use the bootstrap C.S.S. classes alert and alert-danger. 62 00:04:31,530 --> 00:04:35,580 Let's press F5 to run and test our app one more time. 63 00:04:35,580 --> 00:04:36,920 Go ahead and save the form. 64 00:04:39,620 --> 00:04:43,980 Great, our messages display in the now nicely styled summary section. 65 00:04:45,310 --> 00:04:48,940 Select a value for the activity field and save the form again. 66 00:04:51,890 --> 00:04:57,130 Now we're seeing just the duration message at a value greater than zero for 67 00:04:57,130 --> 00:04:58,150 the duration field. 68 00:04:59,700 --> 00:05:00,550 And save the form. 69 00:05:01,630 --> 00:05:05,204 And we're back on the entries list page, and here's our new entry. 70 00:05:06,855 --> 00:05:08,700 Go ahead and stop the app. 71 00:05:10,420 --> 00:05:12,216 If you're using GitHub let's commit our changes. 72 00:05:15,788 --> 00:05:23,130 Enter a commit message of Added validation summary section. 73 00:05:23,130 --> 00:05:24,260 And click the Commit All button. 74 00:05:26,230 --> 00:05:29,060 Now that we have our server side validation in place, 75 00:05:29,060 --> 00:05:31,710 we'll work on implementing client side validation.