Instructor: Hey, welcome back.
So in this video we're gonna talk
about required fields again
but I'm gonna show you how you can
perform some customizations
on the actual required field error messages.
One thing that you may have noticed is that
in the previous examples all of the error messages
showed up at the top of form.
What we'd like to do is modify that
such that the error message shows up
just next to the form.
So what we can do is remove the h:messages
and then add in h:message for a given field ID.
And I'll actually show you how to do that
in this video.
Alright so let's go ahead and swing into Eclipse
and let's go ahead and take a look at our form again.
Our student_one_form.xhtml.
And let me expand the window here.
So the first thing I'm gonna do is
I'm gonna move down to line 20
and I'm gonna remove this h:messages.
So instead of displaying all of the messages
at the top of the form
I wanna remove this and display 'em on each individual item.
So I'll start here with last name.
So right underneath last name I will say h:message.
And I give for= and then I give
the actual ID of the field
that this error message relates to.
So here I'm gonna say this is for last name.
Last_name.
Now right now our last name input text doesn't have an ID
and we need to add that information.
So I'm gonna finish the h:message.
I'll move up to the last name field
and I'm gonna add an ID for last_name.
So that's the actual ID I need to set up
so I add a new entry here.
So I say id=last_name.
So these two items match up.
So ID of last_name then we say the for
you use the same ID of that actual field.
So I'm gonna copy this
and you do the same approach for email address.
So for email I'm gonna go ahead and set up an ID.
So the ID is email, all lowercase.
And then on line 39, for
instead of last name is gonna be for email.
Again, when you give the for you give the actual ID
of the input text that you're using.
So these two items match up.
Alright so this looks really good.
So we have the message for each field individually now.
Alright so let's test this out
in our new form that we have here.
So I'll just hit submit and wow this looks great!
So instead of all the messages being at the top of the page
they're actually over to the side.
So last name, validation error,
email, validation error, field is required.
So this is great, so we can kinda customize
the layout and placement of the actual error messages.
So good job here.
Now one thing I'd like to do is kinda
customize the actual error message.
So right now, by default, they're giving us
the error message out of the box.
And I wanna change that actual error message myself.
So in the actual form I can
drop in this entry here, requiredMessage.
So this is the actual error message that'll show up
if they don't give us the required field.
So here requiredMessage and I'll say
your last name is mandatory.
And again I can make this up,
I can give whatever message I'd like here.
And then for email I'm gonna say the requiredMessage
here I'll say, I'll change this up a bit,
must give email.
So again whatever you wanna specify here
that's your actual message that you can list.
So here I just added a new entry here for requiredMessage.
So that's the actual required error message
that'll show up if they don't give us the appropriate data.
Well now let's go ahead and try this out.
So I've made the adjustments, here's our new form,
our revised form, I'll go ahead and hit submit.
And great now we have our custom message
by using that requiredMessage.
So your last name is mandatory and your must give your email
so (laughs) even if I have a little typo
or I have bad english here, that message still shows up
so that's a typo on my part but hey.
Validation that we're getting our own custom message.
So this is great, we can even customize the error messages
that are displayed for the validation.
So this is great, so you really have a lot of flexibility
on how you wanna handle the validation here
for required fields.
Great job!
You're on a roll.
Well that was fun, I showed you some additional features
that you can add here for validation,
showed you how we could handle the placement
of a single error message right next to the actual field
and I also showed you how you can
customize the text of the error message.
So you have full run of how to build
JSF forms with required fields.