1
00:00:00,630 --> 00:00:03,270
Adding service side
validation to our web app

2
00:00:03,270 --> 00:00:06,400
really improves our
overall user experience.

3
00:00:06,400 --> 00:00:09,590
Now it's time to see,
how we can leverage MVCs support for

4
00:00:09,590 --> 00:00:14,480
unobtrusive client side validation to
improve the experience even further.

5
00:00:14,480 --> 00:00:18,660
We'll be using the NuGet package manager
to install a couple of packages.

6
00:00:18,660 --> 00:00:23,100
If you're unfamiliar with NuGet, or need
a refresher, see the teacher's notes for

7
00:00:23,100 --> 00:00:26,670
Treehouse resources that you
can use to get up to speed.

8
00:00:26,670 --> 00:00:29,513
To open the NuGet package manager,

9
00:00:29,513 --> 00:00:36,250
go to Tools> NuGet Package Manager>
Manage NuGet Packages for Solution.

10
00:00:36,250 --> 00:00:40,610
Under the browse tab, we can type the name
of the package that we want to search for.

11
00:00:41,620 --> 00:00:45,780
I'll type jquery validation.

12
00:00:45,780 --> 00:00:50,490
After a second or two, the NuGet package
manager will display the relevant results.

13
00:00:50,490 --> 00:00:54,480
The first result is
the jQuery.Validation package.

14
00:00:54,480 --> 00:00:57,850
And right below is the other
package that we need.

15
00:00:57,850 --> 00:01:00,899
The
Microsoft.jQuery.Unobtrusive.Validation

16
00:01:00,899 --> 00:01:01,850
package.

17
00:01:01,850 --> 00:01:05,400
You can see to the right of the package
name that both packages have had

18
00:01:05,400 --> 00:01:07,760
a substantial number of downloads.

19
00:01:07,760 --> 00:01:14,395
At the time of this recording,
10.8 million and 9.11 million downloads.

20
00:01:14,395 --> 00:01:18,240
These packages will add
the JavaScript files to our project

21
00:01:18,240 --> 00:01:21,340
that we need to implement
client side validation.

22
00:01:21,340 --> 00:01:24,050
Let's install
the jQuery.Validation package.

23
00:01:24,050 --> 00:01:26,520
I'll click on it in the search results.

24
00:01:26,520 --> 00:01:30,160
Select our project on the right and
click the Install button.

25
00:01:31,330 --> 00:01:34,760
We'll be asked to confirm the action,
so click OK to proceed.

26
00:01:36,720 --> 00:01:41,953
Then repeat that process for the
Microsoft.jQuery.Unobtrusive.Validation

27
00:01:41,953 --> 00:01:42,639
package.

28
00:01:51,534 --> 00:01:55,395
Now that we've added the necessary
JavaScript files to our project,

29
00:01:55,395 --> 00:01:58,547
we need to add two new script
includes to our layout page.

30
00:02:01,480 --> 00:02:05,201
Scroll down to the bottom of the page and
let's add our new scripts,

31
00:02:05,201 --> 00:02:07,365
just after the jQuery script include.

32
00:02:10,886 --> 00:02:18,688
Script
src=~/Scripts/jqueryvalidate.min.js,

33
00:02:18,688 --> 00:02:22,989
then close the script element.

34
00:02:26,166 --> 00:02:35,553
Then script
src=~/Scripts/jqueryvalidate.unobtrusive.-

35
00:02:35,553 --> 00:02:41,263
min.js, then close the script element.

36
00:02:41,263 --> 00:02:43,809
After the addition of
these two new scripts,

37
00:02:43,809 --> 00:02:47,903
we now have a total of five files that
we're requesting from the server.

38
00:02:47,903 --> 00:02:52,191
In a future course, we'll see how we
can use MVC's bundling feature to

39
00:02:52,191 --> 00:02:55,839
combine our individual files into one or
more script bundles

40
00:02:55,839 --> 00:03:00,840
to reduce the total number of requests
that we're making to the server.

41
00:03:00,840 --> 00:03:04,380
Which can improve the overall
performance of our web app.

42
00:03:04,380 --> 00:03:05,612
Before we test our app,

43
00:03:05,612 --> 00:03:09,070
let's set a breakpoint in our
controller's post action method.

44
00:03:13,538 --> 00:03:17,960
If our client side validation works
correctly, we won't hit this breakpoint

45
00:03:17,960 --> 00:03:21,930
when we try saving our form with
incomplete or invalid data.

46
00:03:21,930 --> 00:03:24,520
Let's press F5 to run, and test our app.

47
00:03:25,930 --> 00:03:29,470
I'll browse to the Add Entry page,
and try saving the form.

48
00:03:31,900 --> 00:03:37,460
And we hit our breakpoint, so
our client side validation, didn't work.

49
00:03:37,460 --> 00:03:38,900
What's the problem?

50
00:03:38,900 --> 00:03:41,690
Well, we made a very common mistake.

51
00:03:41,690 --> 00:03:46,510
Adding the necessary JavaScript files
to the page is not enough on its own.

52
00:03:46,510 --> 00:03:50,280
You need to also explicitly
enable MVC support for

53
00:03:50,280 --> 00:03:55,430
client side validation, by setting two
app settings in the Web.config file.

54
00:03:55,430 --> 00:03:56,969
Go ahead and stop the app.

55
00:04:03,946 --> 00:04:10,560
The Web.config file is located in
the root of our project, here it is.

56
00:04:10,560 --> 00:04:14,530
If you're following along, make sure
that you're opening the Web.config file

57
00:04:14,530 --> 00:04:19,310
in the root of the project and not
the Web.config file in the Views folder.

58
00:04:19,310 --> 00:04:24,510
In the app settings section,

59
00:04:24,510 --> 00:04:29,502
we need to add two settings,

60
00:04:29,502 --> 00:04:37,410
add key= UnobtrusiveJavaScriptEnabled.

61
00:04:37,410 --> 00:04:40,035
And set the value to true.

62
00:04:42,081 --> 00:04:50,375
Then add key="ClientValidationEnabled" and

63
00:04:50,375 --> 00:04:54,870
set the value to true.

64
00:04:54,870 --> 00:04:59,570
The first setting tells MVC that we want
to enable unobtrusive JavaScript for

65
00:04:59,570 --> 00:05:00,620
our web app.

66
00:05:00,620 --> 00:05:04,570
We'll take a closer look at what
unobtrusive means in just a bit.

67
00:05:04,570 --> 00:05:09,650
The second setting enables client side
validation for every page in our web app.

68
00:05:09,650 --> 00:05:10,710
Let's run our app.

69
00:05:13,516 --> 00:05:15,030
I'll try to save our form again.

70
00:05:16,290 --> 00:05:19,990
Well, we didn't hit our breakpoint,
so that's a plus, but

71
00:05:19,990 --> 00:05:22,650
we aren't seeing any validation messages.

72
00:05:22,650 --> 00:05:25,150
What did we do wrong this time?

73
00:05:25,150 --> 00:05:27,510
This is another common mistake.

74
00:05:27,510 --> 00:05:30,625
If you're planning to use
client side validation,

75
00:05:30,625 --> 00:05:35,101
your validation summary section needs
to be rendered inside of your form.

76
00:05:41,272 --> 00:05:42,747
If we look at our view,

77
00:05:42,747 --> 00:05:46,871
you can see that we put our summary
section just above our form.

78
00:05:46,871 --> 00:05:50,986
If we move this line of code
just inside of our form element,

79
00:05:55,099 --> 00:06:01,144
Save the view, refresh the page and
try saving our form again,

80
00:06:01,144 --> 00:06:06,051
we'll now see the expected
validation messages,

81
00:06:06,051 --> 00:06:11,160
without having to submit
our data to the server.

82
00:06:11,160 --> 00:06:15,560
Let's select the value for the Activity
field and save the form again.

83
00:06:17,710 --> 00:06:19,900
Now we're at our breakpoint.

84
00:06:19,900 --> 00:06:24,660
If we press F5 to continue,
we'll return back to our form.

85
00:06:24,660 --> 00:06:28,002
Now we're seeing our server
side validation message.

86
00:06:28,002 --> 00:06:30,930
MVC's unobtrusive client side validation

87
00:06:30,930 --> 00:06:34,160
can seem like magic the first
time that you see it in action.

88
00:06:34,160 --> 00:06:37,905
Even after you understand how it works,
it's still an impressive feature.

89
00:06:37,905 --> 00:06:42,840
To start with, what does
unobtrusive mean in this context?

90
00:06:42,840 --> 00:06:47,920
The approach of separating JavaScript
code from the page's HTML and following

91
00:06:47,920 --> 00:06:53,300
progressive enhancement principles
is known as Unobtrusive JavaScript.

92
00:06:53,300 --> 00:06:56,300
By writing our JavaScript
in an unobtrusive way,

93
00:06:56,300 --> 00:07:01,300
our web page will function whether or not
a user's browser has JavaScript enabled.

94
00:07:01,300 --> 00:07:06,100
For more information about unobtrusive
JavaScript, see the teacher's notes.

95
00:07:06,100 --> 00:07:11,350
So, how does MVC's unobtrusive client
side validation actually work?

96
00:07:11,350 --> 00:07:14,775
To make the element and
its attributes easier to see,

97
00:07:14,775 --> 00:07:19,740
I'll right-click on the text box for
the Duration field, select Inspect,

98
00:07:23,817 --> 00:07:30,619
Copy the element to the clipboard,
And paste into Notepad.

99
00:07:30,619 --> 00:07:33,723
Let's add some line breaks
to make this easier to read.

100
00:07:44,910 --> 00:07:48,452
Now that we've enabled unobtrusive
client side validation,

101
00:07:48,452 --> 00:07:52,492
MVC is adding a number of data
attributes to the input element.

102
00:07:52,492 --> 00:07:57,560
The data-val attribute enables client
side validation for this input element.

103
00:07:57,560 --> 00:07:59,112
The data-val-number and

104
00:07:59,112 --> 00:08:04,450
data-val-required attributes are the
validation rules to apply to this element.

105
00:08:04,450 --> 00:08:09,895
The attribute values are the messages to
display when the validation rule fails.

106
00:08:09,895 --> 00:08:14,350
These attributes by themselves
don't do anything, that's where

107
00:08:14,350 --> 00:08:19,110
the Microsoft jQuery unobtrusive
validation library comes into play.

108
00:08:19,110 --> 00:08:22,730
When the page loads in the browser,
the unobtrusive library checks

109
00:08:22,730 --> 00:08:26,938
each input element for
the presence of the data-val attribute.

110
00:08:26,938 --> 00:08:30,450
If the attribute's value is true
then it proceeds to convert

111
00:08:30,450 --> 00:08:34,710
any data-val attributes that
are found on the element to rules for

112
00:08:34,710 --> 00:08:37,400
the jQuery validation library.

113
00:08:37,400 --> 00:08:40,990
When the Save button is clicked,
the jQuery validation library

114
00:08:40,990 --> 00:08:45,900
intercepts the form submission and
evaluates each of its configured rules.

115
00:08:45,900 --> 00:08:49,110
And if the form is in an invalid state,
communicates

116
00:08:49,110 --> 00:08:53,940
back to the unobtrusive validation
library, the list of messages to display.

117
00:08:53,940 --> 00:08:57,770
The unobtrusive validation library
then displays those messages

118
00:08:57,770 --> 00:08:58,760
in the summary section.

119
00:08:59,760 --> 00:09:02,170
If the form is in a valid state,

120
00:09:02,170 --> 00:09:05,760
the form submission is allowed to
continue with posting to the server.

121
00:09:07,390 --> 00:09:08,760
Go ahead and stop the app.

122
00:09:09,870 --> 00:09:12,539
If you're using GitHub,
let's commit our changes.

123
00:09:15,415 --> 00:09:21,212
Enter a commit message of,
Enabled client-side validation,

124
00:09:21,212 --> 00:09:24,227
and click the Commit All button.

125
00:09:27,671 --> 00:09:31,284
MVC's client-side validation
is easy to use and for

126
00:09:31,284 --> 00:09:35,390
the vast majority of use-cases,
it just works.

127
00:09:35,390 --> 00:09:37,150
In the rare times that it doesn't work for

128
00:09:37,150 --> 00:09:40,210
your situation, you might need
to customize some part of it.

129
00:09:41,210 --> 00:09:44,570
When that happens, you'll find
yourself digging into how the jQuery

130
00:09:44,570 --> 00:09:47,040
validation plugin works, as well as,

131
00:09:47,040 --> 00:09:52,640
how the MVC unobtrusive validation code
works on top of the jQuery plugin.

132
00:09:52,640 --> 00:09:56,155
If you'd like to learn more about
the jQuery validation plugin or

133
00:09:56,155 --> 00:09:59,980
MVC's unobtrusive validation library,
see the teacher's notes.

134
00:10:01,010 --> 00:10:01,775
In the next video,

135
00:10:01,775 --> 00:10:06,390
we'll wrap up this section by taking
a look at how to improve the integration

136
00:10:06,390 --> 00:10:10,520
between our client side validation and
Bootstrap's form validation styles.