This course will be retired on June 1, 2025.
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
Let’s see how to update our web app to take full advantage of Bootstrap’s available form styles.
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.6 -b improving-validation-css-styles
Code
Here’s the JavaScript code snippet that you need to add to the layout page in order to fully support the available Bootstrap form validation styles.
(function ($) {
var defaultOptions = {
validClass: 'has-success',
errorClass: 'has-error',
highlight: function (element, errorClass, validClass) {
$(element).closest('.form-group')
.removeClass(validClass)
.addClass(errorClass);
},
unhighlight: function (element, errorClass, validClass) {
$(element).closest('.form-group')
.removeClass(errorClass)
.addClass(validClass);
}
};
$.validator.setDefaults(defaultOptions);
$.validator.unobtrusive.options = {
errorClass: defaultOptions.errorClass,
validClass: defaultOptions.validClass,
};
})(jQuery);
Additional Learning
See Bootstrap’s official documentation for more information about its available form control validation styles.
If you’d like to learn more about JavaScript or jQuery, see these Treehouse courses.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
The Bootstrap CSS
framework makes it easy for
0:00
our form fields to show when they're
in a valid or invalid state.
0:03
Bootstrap's documentation shows us
an example of what this looks like.
0:08
Here's an input element
that's in a valid state, and
0:12
another that's in an invalid state.
0:16
The designer that created
our Webapp CSS styles
0:19
knew that we were using
bootstrap compatible markup.
0:22
So they created a design
that took full advantage
0:25
of the available bootstrap CSS classes.
0:29
Unfortunately MFECs unobtrusive
clientside validation library
0:32
doesn't fully support
bootstrap's validation styles.
0:37
If we run our app browse to the add
entry page and save the form.
0:42
We can see that the invalid fields
don't change their appearance to
0:48
indicate that they're in an invalid state.
0:52
To get the behavior that we're looking for
we need to customize the Jquery
0:56
validation library to use the available
bootstrap validation styles.
1:00
Go ahead and stop the app.
1:05
To start, we need to add a new
JavaScript file to our project.
1:08
Right-click on the Scripts folder and
1:12
select Add, JavaScript File and
1:17
name the file
jquery.validate.bootstrap.js.
1:21
For the contents of the file I'll
switch over to notepad and select and
1:30
copy this text to the clipboard.
1:34
If you're following along, you can find a
copy of this code in the teacher's notes.
1:37
Then in Visual Studio,
1:42
I'll paste the contents of
the clipboard into our new file.
1:43
Let's take a moment to review this code.
1:53
Don't worry if you aren't familiar
with JavaScript or jQuery.
1:55
While it's helpful to have a basic
understanding of JavaScript and
1:59
jQuery when working with NVC, it's not
necessary in order to learn the basics.
2:02
To start with, we're defining
an object with four properties,
2:08
valid class, air class,
highlight, and un highlight.
2:13
These first two properties are used to
update the jQuery validation library as
2:18
valid an Error CSS classes to use the
available bootstrap validation classes.
2:23
The next two properties define functions
that are called by the jQuery validation
2:29
library when highlighting and
un highlighting fields.
2:34
We need to customize these functions in
order to ensure that the valid in error
2:38
CSS classes are placed on
the correct form field element.
2:43
The highlight function uses jquery to
find the closest element with a CSS class
2:47
a foreign group then removes the valid
class and adds the the air class.
2:53
The unhighlight function
does the opposite.
2:58
It finds the closest element with
the css class of form-group then
3:02
removes the errorClass and
adds the validClass.
3:07
This line of code, calls the jQuery
validation libraries setDefaults function
3:11
passing in our defaultOptions object.
3:16
Calling this function, tells
the library to use our default options.
3:19
And these last lines of code are set in
Microsoft jQuery unobtrusive validation
3:24
library options, using our default
options, object errorClass and
3:29
validClass properties.
3:33
Now that we have our new
JavaScript file created,
3:35
we need to update our layout page
with the necessary script include.
3:38
Script src =~/Scripts and
3:49
then jquery.validate.bootstrap.js.
3:55
And then close the script element
ready to test press F5 to run our app.
4:03
Browse to the ad entry page and
save the form and
4:10
now are valid fields are labeled
with a green check-mark.
4:14
And invalid fields are labeled
with a red x that gives our users
4:20
a nice visual indication as to
where their attention is required.
4:25
Go ahead and stop the app.
4:30
If you're using GitHub,
let's commit our changes.
4:32
Enter a commit message of Added jQuery
4:38
Validation Bootstrap customization and
4:43
click the Commit All button.
4:48
Let's also sync with the remote server.
4:53
Navigate to the synchronization panel and
click the push link.
4:56
Ensuring that users can successfully use
your app to create data that meets your
5:05
expectations around data quality is
an important feature for any app or
5:09
application to have.
5:13
Let's review what we
learned in this section.
5:15
We learned about form validation, how it
can improve our web apps overall user
5:18
experience, and the differences between
client side and server side validation.
5:22
We then learned how to implement server
side validation by manually adding model
5:28
state errors or placing data annotation
attributes on our model properties.
5:32
We also learned how to display
validation messages to our users.
5:38
And lastly, how to leverage MVC's support
for unobtrusive client-side validation.
5:43
Adding form validation takes us a big
step towards completing the fitness frog
5:48
web app.
5:53
In the next section, we'll finish our web
app by adding a few more missing features
5:53
including the ability to update or
delete entries.
5:58
Let's keep going.
6:01
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up