Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Now it’s time to see how we can leverage MVC’s support for unobtrusive client-side validation to improve our overall user experience.
Follow Along
To follow along commiting your changes to this course, you'll need to fork the aspnet-fitness-frog repo. Then you can clone, commit, and push your changes to your fork like this:
git clone <your-fork>
cd aspnet-fitness-frog
git checkout tags/v4.5 -b implementing-unobtrusive-client-side-validation
Loading Scripts Using Layout Sections
There are two ways that we can load the scripts that we need to enable client-side validation: we can add the scripts to the layout page so every page in our web app has access to them or we can add the scripts just to the pages that need to have access to them.
Adding the scripts to the layout page makes it easier to support client-side validation throughout your web application or app. But for some situations, it might make sense to not require those additional files for pages that will never need client-side validation.
In this course, we chose to add the scripts to our layout page—for ease of use. Let’s take a look at how to add the scripts to just the views that need them.
First, we need to add a new “render section” to our layout page.
@RenderSection("scripts", required: false)
I typically put this “scripts” section just after any other script includes that are on the layout page. Now that we have a “scripts” section on our layout page, we can add the following code to any of our app’s views.
@section scripts {
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
}
That’s all there is to it! Remember, if you use this approach, you’ll need to add that @section directive to each view that will need support for client-side validation.
Additional Learning
If you’re unfamiliar with NuGet or need a refresher, be sure to check out this Treehouse workshop.
Package Management with NuGet If you’d like to learn more about the jQuery Validation plug-in, see their official documentation.
If you’d like to learn more about unobtrusive JavaScript and why it’s important, see this Treehouse blog post.
Adding service side
validation to our web app
0:00
really improves our
overall user experience.
0:03
Now it's time to see,
how we can leverage MVCs support for
0:06
unobtrusive client side validation to
improve the experience even further.
0:09
We'll be using the NuGet package manager
to install a couple of packages.
0:14
If you're unfamiliar with NuGet, or need
a refresher, see the teacher's notes for
0:18
Treehouse resources that you
can use to get up to speed.
0:23
To open the NuGet package manager,
0:26
go to Tools> NuGet Package Manager>
Manage NuGet Packages for Solution.
0:29
Under the browse tab, we can type the name
of the package that we want to search for.
0:36
I'll type jquery validation.
0:41
After a second or two, the NuGet package
manager will display the relevant results.
0:45
The first result is
the jQuery.Validation package.
0:50
And right below is the other
package that we need.
0:54
The
Microsoft.jQuery.Unobtrusive.Validation
0:57
package.
1:00
You can see to the right of the package
name that both packages have had
1:01
a substantial number of downloads.
1:05
At the time of this recording,
10.8 million and 9.11 million downloads.
1:07
These packages will add
the JavaScript files to our project
1:14
that we need to implement
client side validation.
1:18
Let's install
the jQuery.Validation package.
1:21
I'll click on it in the search results.
1:24
Select our project on the right and
click the Install button.
1:26
We'll be asked to confirm the action,
so click OK to proceed.
1:31
Then repeat that process for the
Microsoft.jQuery.Unobtrusive.Validation
1:36
package.
1:41
Now that we've added the necessary
JavaScript files to our project,
1:51
we need to add two new script
includes to our layout page.
1:55
Scroll down to the bottom of the page and
let's add our new scripts,
2:01
just after the jQuery script include.
2:05
Script
src=~/Scripts/jqueryvalidate.min.js,
2:10
then close the script element.
2:18
Then script
src=~/Scripts/jqueryvalidate.unobtrusive.-
2:26
min.js, then close the script element.
2:35
After the addition of
these two new scripts,
2:41
we now have a total of five files that
we're requesting from the server.
2:43
In a future course, we'll see how we
can use MVC's bundling feature to
2:47
combine our individual files into one or
more script bundles
2:52
to reduce the total number of requests
that we're making to the server.
2:55
Which can improve the overall
performance of our web app.
3:00
Before we test our app,
3:04
let's set a breakpoint in our
controller's post action method.
3:05
If our client side validation works
correctly, we won't hit this breakpoint
3:13
when we try saving our form with
incomplete or invalid data.
3:17
Let's press F5 to run, and test our app.
3:21
I'll browse to the Add Entry page,
and try saving the form.
3:25
And we hit our breakpoint, so
our client side validation, didn't work.
3:31
What's the problem?
3:37
Well, we made a very common mistake.
3:38
Adding the necessary JavaScript files
to the page is not enough on its own.
3:41
You need to also explicitly
enable MVC support for
3:46
client side validation, by setting two
app settings in the Web.config file.
3:50
Go ahead and stop the app.
3:55
The Web.config file is located in
the root of our project, here it is.
4:03
If you're following along, make sure
that you're opening the Web.config file
4:10
in the root of the project and not
the Web.config file in the Views folder.
4:14
In the app settings section,
4:19
we need to add two settings,
4:24
add key= UnobtrusiveJavaScriptEnabled.
4:29
And set the value to true.
4:37
Then add key="ClientValidationEnabled" and
4:42
set the value to true.
4:50
The first setting tells MVC that we want
to enable unobtrusive JavaScript for
4:54
our web app.
4:59
We'll take a closer look at what
unobtrusive means in just a bit.
5:00
The second setting enables client side
validation for every page in our web app.
5:04
Let's run our app.
5:09
I'll try to save our form again.
5:13
Well, we didn't hit our breakpoint,
so that's a plus, but
5:16
we aren't seeing any validation messages.
5:19
What did we do wrong this time?
5:22
This is another common mistake.
5:25
If you're planning to use
client side validation,
5:27
your validation summary section needs
to be rendered inside of your form.
5:30
If we look at our view,
5:41
you can see that we put our summary
section just above our form.
5:42
If we move this line of code
just inside of our form element,
5:46
Save the view, refresh the page and
try saving our form again,
5:55
we'll now see the expected
validation messages,
6:01
without having to submit
our data to the server.
6:06
Let's select the value for the Activity
field and save the form again.
6:11
Now we're at our breakpoint.
6:17
If we press F5 to continue,
we'll return back to our form.
6:19
Now we're seeing our server
side validation message.
6:24
MVC's unobtrusive client side validation
6:28
can seem like magic the first
time that you see it in action.
6:30
Even after you understand how it works,
it's still an impressive feature.
6:34
To start with, what does
unobtrusive mean in this context?
6:37
The approach of separating JavaScript
code from the page's HTML and following
6:42
progressive enhancement principles
is known as Unobtrusive JavaScript.
6:47
By writing our JavaScript
in an unobtrusive way,
6:53
our web page will function whether or not
a user's browser has JavaScript enabled.
6:56
For more information about unobtrusive
JavaScript, see the teacher's notes.
7:01
So, how does MVC's unobtrusive client
side validation actually work?
7:06
To make the element and
its attributes easier to see,
7:11
I'll right-click on the text box for
the Duration field, select Inspect,
7:14
Copy the element to the clipboard,
And paste into Notepad.
7:23
Let's add some line breaks
to make this easier to read.
7:30
Now that we've enabled unobtrusive
client side validation,
7:44
MVC is adding a number of data
attributes to the input element.
7:48
The data-val attribute enables client
side validation for this input element.
7:52
The data-val-number and
7:57
data-val-required attributes are the
validation rules to apply to this element.
7:59
The attribute values are the messages to
display when the validation rule fails.
8:04
These attributes by themselves
don't do anything, that's where
8:09
the Microsoft jQuery unobtrusive
validation library comes into play.
8:14
When the page loads in the browser,
the unobtrusive library checks
8:19
each input element for
the presence of the data-val attribute.
8:22
If the attribute's value is true
then it proceeds to convert
8:26
any data-val attributes that
are found on the element to rules for
8:30
the jQuery validation library.
8:34
When the Save button is clicked,
the jQuery validation library
8:37
intercepts the form submission and
evaluates each of its configured rules.
8:40
And if the form is in an invalid state,
communicates
8:45
back to the unobtrusive validation
library, the list of messages to display.
8:49
The unobtrusive validation library
then displays those messages
8:53
in the summary section.
8:57
If the form is in a valid state,
8:59
the form submission is allowed to
continue with posting to the server.
9:02
Go ahead and stop the app.
9:07
If you're using GitHub,
let's commit our changes.
9:09
Enter a commit message of,
Enabled client-side validation,
9:15
and click the Commit All button.
9:21
MVC's client-side validation
is easy to use and for
9:27
the vast majority of use-cases,
it just works.
9:31
In the rare times that it doesn't work for
9:35
your situation, you might need
to customize some part of it.
9:37
When that happens, you'll find
yourself digging into how the jQuery
9:41
validation plugin works, as well as,
9:44
how the MVC unobtrusive validation code
works on top of the jQuery plugin.
9:47
If you'd like to learn more about
the jQuery validation plugin or
9:52
MVC's unobtrusive validation library,
see the teacher's notes.
9:56
In the next video,
10:01
we'll wrap up this section by taking
a look at how to improve the integration
10:01
between our client side validation and
Bootstrap's form validation styles.
10:06
You need to sign up for Treehouse in order to download course files.
Sign up