- Introducing Form Validation 4:04
- Form Validation 5 questions
- Implementing Server-Side Validation Using ModelState 5:45
- Adding Server-Side Validations Using ModelState 1 objective
- Implementing Server-Side Validation Using Data Annotations 4:36
- Adding Server-Side Validations Using Data Annotations 1 objective
- Displaying Validation Messages 5:31
- Displaying Validation Messages 1 objective
- Implementing Unobtrusive Client-Side Validation 10:11
- Improving Validation CSS Styles 6:03
- Section Review 5 questions
Preview
Video Player
00:00
00:00
Improving Validation CSS Styles
6:03Let’s see how to update our web app to take full advantage of Bootstrap’s available form styles.
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