Host: Hey.
Welcome back.
In this video we're going to cover JSF validation
for range and length.
We're going to cover the following topics.
First, we'll start off with a validation demo,
then we'll validate a number range.
Next, we'll learn how to validate input length.
And then finally, we'll pull it all together
with a full JSF page example.
Alright, so a lot of good things in store.
Let's go ahead and dive in.
Let's take a look at our application demo.
We're going to have two fields, free passes.
You can only free passes in the value of in the range
zero to 10 and the postal code can only have five
digits of characters.
So, just to kinda walk through a demo here
to show you how this one works.
So for free passes I gave 33 which is of course
outside of the range.
And for postal code, I'll give a lot of numbers here
which again is outside the rule.
And then you hit submit and it gives
us our validation errors.
So for free passes, it tells us that it's not between
the expected values of zero and 10.
And for the postal code we can only have five digits
or characters and it's greater than the allowable
maximum of five.
So, I can try and fix this for free passes, just enter the
value of four, so it takes care of that rule.
But our postal code still has the error, so I need to change
this to only have five digits.
And then when I hit submit, this will actually clean it up,
pass all the validation rules,
and we get our confirmation page.
In the following slides, we're going to dive in
and I'll show you how to write all the appropriate code
for those validation rules.
Alright, so let's go ahead and get started.
Let's take a look at our first validation rule.
What we want to do is validate a number range,
so for free passes the user can only enter a range
of zero to 10.
So here on the slide we have our input text.
We have value of student two dot free passes,
that's our bean binding.
Then inside of this input text we have this new
element here, validate long range.
So you can specify them minimum value of zero
and the maximum value of 10 and you put any values in there
that you would like, but that's the rule
we're going to apply for this given validation rule
for our example.
Now, the next rule that we want to implement
is for input length so, when the user enters a postal
code they can only enter five digits or characters.
So, here we have our input texts, we have value, student
two dot postal code, again our bean binding here for
managed bean.
Then, inside of this input text, we have a new element,
validate length.
So here, you can specify the minimum number of digits
and the maximum number.
So here I have min five, max five.
No more, no less.
And that's it for that validation rule.
So now, let's go ahead and pull it all together.
So, it the top left, I'm going to have a student two form
that's going to have our form elements for free passes
and postal code.
In the center, I'm going to have a managed bean.
I'm going to call this managed bean student two.
And then, at the bottom, we're going to have
our response page.
And so on the response page, it'll have the student's name,
the number free passes, and the actual postal code
that they entered.
Here's our to do list.
First thing we need to do is add new managed bean class
called student two.
It's going to have the fields for first name, last name,
free passes and postal code.
Then, we need to update the form to make use of
those validation rules.
And then, we'll go ahead and update the confirmation page
to display the number of free passes and the student's
postal code.
Alright, so we have a lot of good stuff in store here.
Let's go ahead and dive into the coding.
Let's go ahead and move into Eclipse.
What I would like to do is make use the existing project
that we created earlier called validate demo.
And what I would like to do is move
into the source directory, into our packaged validate demo/
And, we're going to create a managed bean.
Now, I'm not going to create if from scratch because
we've done a lot of this work before.
And this is simply an enhancement of the managed bean
from the previous video.
So, I'll just kinda walk through the code that I have here.
So, this is for our managed bean called student two.
We have the managed bean annotation on it.
This managed bean is going to hold the form data
so we have four fields here.
First name, last name, postal code and free passes.
The two new items here are postal code and free passes.
We have our normal, no argument constructor.
It has the same name as the class.
And then I simply made use of that Eclipse trick earlier
to generate the getters and setters.
So, that's the getters and setters for first name,
getter and setters for last name.
A similar thing here for postal code.
And the finally, getters and setters for free passes.
So, this is already in place.
A very basic bean.
We've done a lot of this work before.
Now, what I'd like to do is move over and update
our JSF form.
So, in our web content directory
we have a file here called student two for dot x html.
And again, this form is very similar to the form we
created in the previous video, so I"m not going to cover
everything in the form.
I"ll just kind of move down and highlight the new elements
we have entered here.
So here's our form, and we have all the other stuff
for first name and last name.
And I'll just moved down to this section
here for free passes.
So, for free passes, we have an input text.
We have the value of student two dot free passes,
just binding it to that managed bean.
And now we're going to enter our validation rules.
This is most important piece of it for this video.
Our validate for long range, remember for free passes
that the user can have a range for zero to 10.
So a minimum of zero, a maximum of 10.
And that takes care of the rule there for free passes.
And a little bit lower, we have our h message,
so if there are any error messages for this validation rule,
then it will show just next that form field.
Alright, so let's go ahead and take a look at the
work here for postal code.
So, we have our postal code.
And we have an input text item for postal code,
the value again, we bind it to our managed bean,
student two dot postal code.
And then our validation rule here,
again our most important piece.
For our postal, we said that we wanted to have
five characters or digits, so no more, no less.
So the minimum equals five, the maximum equals five.
And that's our validation rule there for our postal code.
Likewise, we have little error message item here for
postal code in the event that error occurs it will show
the error message just to the right of the form field.
And then finally at the bottom, we have our submit button.
And then the action of student two response.
And recall from all the previous videos, JSF will send
this to a file called student two response dot x html.
Great.
Well, we're making some good progress here.
The last thing that we need to is update
our confirmation page to display the number of passes
and the user's postal code.
So again, very similar to the confirmation page from
the previous video, so I here I simply give the student name
and then I display the free passes, and then display
the actual postal code.
So, we're simply calling that managed bean
and displaying the information.
So, that's pretty much it.
So, we got a lot of good stuff here for this little demo.
So, let's go ahead and pull it all together and
run the application.
Okay, so we have the application running here.
For first name I will enter John, last name of Doe.
For free passes, I'm going to give a very large number
of 33, which is of course outside of our range.
And for postal code, I'm going to give a lot of digits here
again, that's going to exceed the maximum of five.
And I'll just test this out by hitting submit.
Okay, great.
So, our validation errors are coming though as expected.
So free passes is not between the values of zero and 10.
Okay, so we know our validation rule is working there.
And also, for postal code, it says the length
is great than the allowable max of five.
Which is of course good.
So, let's go ahead and fix it for our free passes.
Submit the value of four, hit submit.
It's still catching me on postal code.
So, I need to ahead and fix that entry there
and only have five numbers.
And I'll hit submit.
And it goes through to our confirmation page.
We passed all the validation rules.
So we're good to go.
So, this is cool.
So, we can see how this all works out together with our
validation rules for length and range.
Good job.
So, in summary in the video we started we off
with just a validation demo upfront.
Then we learned how to validate a number range.
We also learned how to validate an input length.
And then finally we pulled it all together with a really
good JSF page example.
Well, this wraps up the video.
In this video, we learned how to do JSF validation
for range and length.