Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Implementing Unobtrusive Client-Side Validation

10:11 with James Churchill

Now it’s time to see how we can leverage MVC’s support for unobtrusive client-side validation to improve our overall user experience.

Teacher's Notes
Video Transcript
Downloads

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.
jQuery Validation Plugin

If you’d like to learn more about unobtrusive JavaScript and why it’s important, see this Treehouse blog post.

What is Unobtrusive JavaScript and Why it’s Important?

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