Narrator: Hey, welcome back.
In this video, we're gonna learn about form validation
and how to set up required fields.
We'll cover the following topics.
We'll start off with required fields demo.
Then, we'll learn how to create
required fields on our form.
And then, we'll move into displaying
the validation error messages.
And finally, we'll wrap it all up
with a full JSF page example.
So we have a lot of good things in store for this video.
Let's go ahead and dive in.
Let's start off first, by taking a look
at a demo for the application.
So I have a very basic form.
I have two fields that are required,
the last name and the email.
Those two fields are required.
First name is optional,
so it's not required.
So I'll just take a look at some of the fields here.
And, what I'll do first off is I'll just hit submit.
And it's gonna give me the error messages.
So as I mentioned earlier,
last name is required and also
the email address is required.
So I'll go back and I'll add some data for the first name.
Some data for the last name.
And then hit submit.
And it says, "Okay, you're almost there,
"but email address is still required."
So I still need to give a value for email address.
Okay, great, I'll go ahead and enter my email address.
My email address is john.doe@luv2code.com.
And then I'll hit submit.
Okay, great, so this worked out fine.
So, we gave the information for last name and email address.
That passed the validation test.
And it took us to the actual confirmation page.
So we see that our validation rules
are working as desired up front.
And now what we'll do is
we'll actually learn how to
create those required fields.
Like how to actually specify a field as being required.
So here we have our normal snippet here from an html form.
We'll have our input text.
We'll have our value, studentOne.LastName.
The next item here is the label.
That's the actual label they'll use
if there's a validation error.
They'll tell you what the field name is, based on the label.
Then also, here, we're gonna say required equals true.
So here, pretty straightforward, right?
This field is required.
If you don't give this value,
then it defaults to being false.
Alright, great, now how do you display the error messages?
So, you saw earlier how the error messages
were displayed in red,
in a bullet list at the top of the form.
How do you set this up in a JSF page?
Well over on the right hand side,
we have a little snippet of the source code.
And so take a look at line 20.
On line 20, we're gonna make use of this new element
called messages, h:messages.
What this will do is,
this will actually check to see
if there are any error messages,
and if so, it'll display those error messages
as a bullet list.
And, actually, it's more than just error messages.
Basically any messages.
But here, the case of error messages.
We can also style the error messages.
So we can set up a cascading style sheet
style for the message.
So here, I'm gonna define this class called, "Error."
And up top on lines 10 through 12,
we've specified that style for error.
So basically we're saying,
the color of the text is going to be red.
Now, this is regular CSS work,
or cascading style sheet work.
You could define the styles
on a separate file if you'd like,
but here just to keep things simple,
I put it in the same file as the JSF.
But the key item here is,
in order to display messages,
you use the h:messages element.
Alright, so let's pull this all together with an example.
So on the top left we're gonna have our student form,
first name, last name, email.
The two fields for last name and email,
those are gonna be required.
In the center, we're gonna have a managed bean.
I'll call it StudentOne.
And then at the bottom,
we'll have our StudentOne response page.
This is basically just our confirmation page
for the user and their email information.
So those are the big pieces here
that we'll have in the application.
And I'll actually walk you through
each one of those coming up here.
Alright, so let's go ahead and move into Eclipse.
We're gonna make use of that existing project
that we created in a previous video, validate-demo.
So this was already created on a previous video.
What I'd like to do is,
I'd like to start off with actually creating
that JSF form to read the user input data.
So I'll just right-click.
Go to new, and I'll say new HTML file.
The name of this file will be called student_one_form.xhtml.
So student_one_form.xhtml.
And then you can go ahead and click Finish
once that data is entered.
Now by default, they're gonna
give you a very basic template.
Again, like in some of the previous videos,
just go ahead and highlight everything,
and just delete all of that text.
We're gonna start from scratch.
Alright, so I have an empty file right now.
Then I'm gonna go through and drop in some elements
here for this JSF page.
So I'll start off with a normal header information
referring to the various JSF libraries that I'll use.
And then I'll set up the head section,
where I simply just set up the title for this JSF page,
Student One Registration Form.
And then I'll go ahead and put in the body of the page,
along with the form.
And, note again, how Eclipse will kind of
do some of the code completion here for you,
for the end tags.
So at this point I have a very basic page,
I have a body, and then, inside of that I have a form.
The form's empty.
I need to add some elements to the form.
So let me open up the window,
or expand the window a bit,
so I can have some room to work in.
Get dirty.
Move around a bit.
And so, what I'll do is, I'll start off with the first name.
So, simply a first name label, along with a text box for it.
And remember, the first name is not required,
so we're not gonna put any special rules on it.
And then I'll just kind of repeat
this process here for last name.
So I'll just drop in some code for last name.
Now for last name, things are a little bit different.
So let's kind of walk through this a bit.
So on lines 20 through 22,
so the one new item here is that required equals true.
And we saw that in the previous slide presentation.
But here, the last name is required,
so required equals true.
JSF will read that attribute,
and it'll perform validation on it
when this form is processed.
And I also want to just repeat this for email.
So email is also gonna have its field
being set for required equals true for email.
So again, just kind of stepping back,
the last name and the email address
on this form are required.
And then, finally, I'll just wrap up
with our command button.
So our command button, label of Submit.
And then the action, we're gonna make use of
this student one response.
So, remember, like in the previous videos,
we'll have to create a page
called student_one_response.xhtml.
But we'll get to that shortly.
Alright, so this all looks really good.
So we have our basic form set up,
and it's ready to go.
So now let's go ahead and take care of
some of our other work.
And there's one more thing we have to do.
We need to set up the displaying of the error messages.
So, here I need to make use of the h:messages.
So this will, again, check for any error messages.
If it finds some, it'll display
a bullet list of all those error messages.
And also, I'm referring to this style class called "error."
I haven't defined it yet in this file.
So let's go ahead and move up top
and define it in the header section.
So moving into the header section,
I'm simply gonna define a style.
And the style class is called "error."
And here we're simply setting the font color to be red.
So that's how we will get all of our error messages in red.
And again, you could make use of your own styles here,
or you could import a given style sheet,
but here I'm just keeping it simple
right now for our basic example.
Now the next thing we need to do is
we need to actually create our managed bean
to actually hold our form data, right?
So, moving back over here into the window,
I go to source, actually I need to create a package,
so I'm gonna go right-click, New.
And I'll choose Package.
Cause I wanna put the managed bean
into a luv2code package here.
So, for the actual name of the package,
I'll call com.luv2code.jsf.validatedemo.
And that's the actual name of my package
that I will use for my managed bean.
And once you're happy with that,
you can go ahead and click Finish.
It'll create the package.
That's kind of what it looks like here on the screen.
Now, this is where I will place my managed bean.
So, on the package, I'll just right-click,
I'll say New, Class.
The actual name of the class
I'm gonna use is called StudentOne.
So StudentOne.
I'll keep all the other defaults here in this example.
And once I'm happy with this,
then I'll go ahead and click the Finish button
in the bottom right.
Okay great, so we have this
very basic class here called StudentOne.
You can just expand the window.
This is gonna be our managed bean,
so I give the managed bean annotation.
And again, we've done all this before
in the previous videos.
Just make sure I do a proper import here
for javax.faces.bean, managed bean.
I'll choose the first option here.
Alright, so great, so the import's taken care of.
Now we're gonna define our fields.
We're gonna have three fields here.
The first field is gonna be for first name.
Then we'll have last name.
And then we'll have email.
So those are our fields that we're gonna to use
to capture form data.
Now what we need to do
is create our no argument constructor.
So again, we create the constructor.
It has the same name as the class,
so public StudentOne.
It just does nothing for now.
So give me some time to give us some working room here.
And the next thing we want to do
is create our getter and setter methods.
And again, just like the previous videos,
we're gonna make use of that Eclipse trick,
the just right-click, choose Source,
and then select Generate Getters and Setters.
And Eclipse will bring up the dialog.
I'll go through and I'll select
all of those items here, email, first name, and last name.
Keep all the other defaults.
And then select OK.
Alright great, so Eclipse did a lot of work here.
Let me just move around here
and just take a look at everything that was completed.
So here Eclipse went through and created
the getters and setters for first name.
It did a similar thing here for last name.
And finally for email.
So again, the basic things that
we need to do for our JSF beans.
So we have our managed bean created,
we have our no argument constructor created,
and we also have our getter and setter methods in place.
So this bean's ready to go.
Good job.
Alright, and the next thing we need to do here
is create the confirmation page, or the response page.
So I'll just do a right-click.
I'll say New, HTML File.
The name of this file is gonna be called
student_one_response.xhtml.
And once you have that entered,
you can go ahead and click the Finish button
in the bottom right.
Again, they give you a lot of template stuff.
Go ahead and select all of it
and hit the delete key on your keyboard.
Just to wipe it out.
And what I'll do is I'll actually go through
and drop in some code that I had previously.
And the confirmation page is
not that much of a big deal because
we're not doing anything really special here.
Just use the body section.
On line 12, we simply display
the student's first name and last name.
And then we display the email.
And again, I'm using the managed bean
and the JSF expression language for that.
That's pretty much it.
So that's our confirmation page.
So now we can simply run the application,
and test it out.
So, for our form here,
first name, last name, email,
I'll just hit Submit.
It's gonna give me the validation errors
because last name's required and email's required.
I'll go through and I'll enter
some data here for first name.
John Doe, I'll try and see if I can sneak by.
Hit Submit.
But it's still catching me on emails.
That value's required,
so I still need to give
an actual email address for this form.
So here I'll just enter john.doe@luv2code.com.
And then we hit Submit.
And everything works out as desired, right?
So now, we have John Doe and his email address
is john.doe@luv2code.com.
So, we entered the required fields
for last name and email address.
Good job.
This looks really good.
Alright, so let's go ahead and summarize this video.
We started off with our application demo.
Then we learned how to create the required fields.
Next, we covered how to display
the validation error messages.
And then finally, we pulled it all together
with a full JSF page example.
So great job.
You learned the basics here on
handling validation rules for required fields.
Well this wraps up the video.
In this video, we learned how to
validate JSF forms with required fields.
Stay tuned.
I have a lot more validation rules to cover
and we'll do a deep dive on those in each separate video.