WEBVTT

1
00:00:01.414 --> 00:00:03.285
<v Instructor>Hey hey, welcome back.</v>

2
00:00:03.285 --> 00:00:04.782
In this video we're gonna cover

3
00:00:04.782 --> 00:00:08.115
JSF validation with regular expressions.

4
00:00:13.534 --> 00:00:15.313
We'll cover the following topics.

5
00:00:15.313 --> 00:00:18.074
We'll start off with the regular expression demo

6
00:00:18.074 --> 00:00:19.574
and then we'll validate a field

7
00:00:19.574 --> 00:00:22.008
with the regular expression,

8
00:00:22.008 --> 00:00:23.643
and finally we'll pull it all together

9
00:00:23.643 --> 00:00:26.785
with the full JSF page example.

10
00:00:26.785 --> 00:00:28.651
In here, I'm assuming that you understand

11
00:00:28.651 --> 00:00:30.149
what regular expressions are,

12
00:00:30.149 --> 00:00:31.974
if not you can do a quick Google search

13
00:00:31.974 --> 00:00:33.707
and find out what they are

14
00:00:33.707 --> 00:00:34.829
but here we'll just assume that knowledge

15
00:00:34.829 --> 00:00:37.075
and we'll move forward.

16
00:00:37.075 --> 00:00:39.841
So here's an example of using a regular expression.

17
00:00:39.841 --> 00:00:42.180
So we have a phone number and we're gonna make use

18
00:00:42.180 --> 00:00:46.052
of a regular expression to match on a given format.

19
00:00:46.052 --> 00:00:47.540
So the format is that you're gonna have

20
00:00:47.540 --> 00:00:49.252
three digits with a hyphen,

21
00:00:49.252 --> 00:00:53.042
three more digits with a hyphen, and finally four digits.

22
00:00:53.042 --> 00:00:56.085
So here, I'm just giving all numbers, it doesn't follow

23
00:00:56.085 --> 00:00:58.704
the format, so here they actually give us

24
00:00:58.704 --> 00:01:00.155
the error message for us.

25
00:01:00.155 --> 00:01:01.561
Three digits, hyphen, three digits,

26
00:01:01.561 --> 00:01:03.805
hyphen, four digits.

27
00:01:03.805 --> 00:01:06.614
So I need to fix this by giving the phone number

28
00:01:06.614 --> 00:01:08.364
in the proper format.

29
00:01:10.454 --> 00:01:12.375
So I go through and hit submit

30
00:01:12.375 --> 00:01:14.577
and then this will pass through just fine

31
00:01:14.577 --> 00:01:17.333
because we followed the appropriate pattern

32
00:01:17.333 --> 00:01:20.844
that was set up by the regular expression.

33
00:01:20.844 --> 00:01:22.199
So what I'll do in the next slide

34
00:01:22.199 --> 00:01:24.117
is I'll show you actually how to implement this

35
00:01:24.117 --> 00:01:25.367
using JSF code.

36
00:01:28.189 --> 00:01:30.015
So here's our JSF example.

37
00:01:30.015 --> 00:01:33.063
So we're gonna validate a North American phone number

38
00:01:33.063 --> 00:01:35.307
like I gave you the pattern a little bit earlier.

39
00:01:35.307 --> 00:01:37.410
So the first bullet here we pass

40
00:01:37.410 --> 00:01:40.176
by giving a number with hyphens,

41
00:01:40.176 --> 00:01:42.139
and the second example fails because

42
00:01:42.139 --> 00:01:44.383
we're missing the hyphens or we're

43
00:01:44.383 --> 00:01:47.550
missing the dashes between the digits.

44
00:01:49.202 --> 00:01:51.125
So here's the actual coding for this

45
00:01:51.125 --> 00:01:54.820
as far as making use of a regular expression.

46
00:01:54.820 --> 00:01:57.576
So we start off with the input text field.

47
00:01:57.576 --> 00:02:00.610
So value is studentThree.phoneNumber,

48
00:02:00.610 --> 00:02:01.789
again we're just binding this to the

49
00:02:01.789 --> 00:02:04.772
Managed Bean in the background.

50
00:02:04.772 --> 00:02:05.794
And then the next element here is

51
00:02:05.794 --> 00:02:08.151
a validator message, so this is the actual

52
00:02:08.151 --> 00:02:12.318
error message that appears if the validation fails.

53
00:02:13.544 --> 00:02:15.622
Finally, we have this new item here

54
00:02:15.622 --> 00:02:17.868
called validateRegex.

55
00:02:17.868 --> 00:02:19.665
So this is where you give your special

56
00:02:19.665 --> 00:02:22.585
regular expression pattern.

57
00:02:22.585 --> 00:02:26.225
So here we're basically saying the pattern is three digits

58
00:02:26.225 --> 00:02:29.258
with a dash, three more digits with a dash,

59
00:02:29.258 --> 00:02:31.058
followed by four digits.

60
00:02:31.058 --> 00:02:32.684
That's the pattern that the user must enter

61
00:02:32.684 --> 00:02:36.559
in order for this validation to pass.

62
00:02:36.559 --> 00:02:39.816
Okay, so let's pull it all together with the full example.

63
00:02:39.816 --> 00:02:43.030
So in the top left, we're gonna have our StudenThree form,

64
00:02:43.030 --> 00:02:46.417
we're gonna have first name, last number, and phone number.

65
00:02:46.417 --> 00:02:49.677
Then in the center, we're gonna have a Managed Bean

66
00:02:49.677 --> 00:02:53.382
called StudentThree, and then at the bottom,

67
00:02:53.382 --> 00:02:55.910
we'll have our StudentThree response page.

68
00:02:55.910 --> 00:02:58.548
This is basically our confirmation page

69
00:02:58.548 --> 00:03:02.715
and we'll simply display the phone number for the user.

70
00:03:06.017 --> 00:03:07.908
Alright, let's look at our to do list

71
00:03:07.908 --> 00:03:09.153
as far was what we have to do.

72
00:03:09.153 --> 00:03:11.635
The first thing we'll do is we'll add a new Managed Bean

73
00:03:11.635 --> 00:03:13.818
class called StudentThree.

74
00:03:13.818 --> 00:03:17.029
It's gonna have the first name, last name, and this new

75
00:03:17.029 --> 00:03:18.946
entry for phone number.

76
00:03:20.602 --> 00:03:22.700
Then, we need to update the form to make use

77
00:03:22.700 --> 00:03:26.617
of our validation rule for regular expressions.

78
00:03:27.983 --> 00:03:30.611
Then, we update the confirmation page

79
00:03:30.611 --> 00:03:33.452
to display the user's phone number.

80
00:03:33.452 --> 00:03:34.991
Alright, so this is our game plan.

81
00:03:34.991 --> 00:03:36.776
I'm ready to start coding.

82
00:03:36.776 --> 00:03:39.026
Let's go ahead and jump in.

83
00:03:46.512 --> 00:03:48.742
Alright, so I'm moving into Eclipse.

84
00:03:48.742 --> 00:03:50.044
What we're gonna do here is we're actually

85
00:03:50.044 --> 00:03:54.211
gonna make use of that existing project, validate-demo

86
00:03:55.853 --> 00:03:56.686
and what I'd like to do is move

87
00:03:56.686 --> 00:03:58.294
to the actual source directory,

88
00:03:58.294 --> 00:04:02.349
so Java Resources, source, our package,

89
00:04:02.349 --> 00:04:04.706
validate-demo, and I'm gonna look

90
00:04:04.706 --> 00:04:07.015
at this class called StudentThree.java.

91
00:04:07.015 --> 00:04:08.838
This is creating the Managed Bean.

92
00:04:08.838 --> 00:04:11.758
And there again, we've done a lot of Managed Beans before,

93
00:04:11.758 --> 00:04:13.099
so I'm not gonna start from scratch.

94
00:04:13.099 --> 00:04:14.400
We'll simply look at the class

95
00:04:14.400 --> 00:04:16.382
and look at some of the new fields here.

96
00:04:16.382 --> 00:04:19.072
So StudentThree is a Managed Bean.

97
00:04:19.072 --> 00:04:21.047
We're gonna have three fields here,

98
00:04:21.047 --> 00:04:24.494
first name, last name, phone number,

99
00:04:24.494 --> 00:04:26.198
and phone number's the new field

100
00:04:26.198 --> 00:04:30.618
that we're working on here for handling regular expressions.

101
00:04:30.618 --> 00:04:33.092
Our standard work of having a no argument constructor,

102
00:04:33.092 --> 00:04:36.759
StudentThree has the same name as the class.

103
00:04:37.728 --> 00:04:39.670
And we have our normal getter and setter stuff.

104
00:04:39.670 --> 00:04:41.048
I just wanna highlight the getters

105
00:04:41.048 --> 00:04:42.585
and setters for phone number.

106
00:04:42.585 --> 00:04:45.752
Get phone number and set phone number.

107
00:04:49.925 --> 00:04:51.880
Alright, so our bean is in good shape.

108
00:04:51.880 --> 00:04:55.247
Let's go ahead and move to the next step.

109
00:04:55.247 --> 00:04:58.571
So the next step, we need to update our JSF form.

110
00:04:58.571 --> 00:05:01.248
So I'm moving to the WebContent directory,

111
00:05:01.248 --> 00:05:05.081
I'll find this file, student_three_form.xhtml.

112
00:05:06.839 --> 00:05:09.880
I'll go ahead and open this file.

113
00:05:09.880 --> 00:05:11.914
I'll expand the window here for a second.

114
00:05:11.914 --> 00:05:14.472
And again, this is basically an extension of what we've done

115
00:05:14.472 --> 00:05:16.296
in the previous videos, so I'm not

116
00:05:16.296 --> 00:05:18.033
gonna cover everything here.

117
00:05:18.033 --> 00:05:20.476
We can start with the form, and then I'll simply

118
00:05:20.476 --> 00:05:24.559
highlight this new section here for phone number.

119
00:05:32.638 --> 00:05:34.950
So this phone number's our input text for the user

120
00:05:34.950 --> 00:05:37.016
to enter their data, we're gonna bind this

121
00:05:37.016 --> 00:05:40.849
to studentThree.phoneNumber, our Managed Bean.

122
00:05:44.809 --> 00:05:48.416
And then we'll also specify the validatorMessage.

123
00:05:48.416 --> 00:05:50.362
So in the event that the validation fails,

124
00:05:50.362 --> 00:05:54.529
this is the message that it'll display on the screen.

125
00:06:01.272 --> 00:06:04.516
Now, we validate this field by using

126
00:06:04.516 --> 00:06:08.516
a validateRegex, so the pattern is three digits,

127
00:06:10.358 --> 00:06:13.852
dash three digits dash four digits.

128
00:06:13.852 --> 00:06:15.062
That's the actual pattern that we're using

129
00:06:15.062 --> 00:06:17.479
to validate this given field.

130
00:06:20.992 --> 00:06:22.610
Alright, so this looks really good.

131
00:06:22.610 --> 00:06:24.892
So we can kinda take a look at line 38,

132
00:06:24.892 --> 00:06:27.148
where we simply display the error message

133
00:06:27.148 --> 00:06:31.315
for phone number in the event that the validation fails.

134
00:06:33.441 --> 00:06:36.035
And then just scrolling on down, we move to line 42

135
00:06:36.035 --> 00:06:39.236
for our command button, or our submit button.

136
00:06:39.236 --> 00:06:41.750
And then the action of student_three_response.

137
00:06:41.750 --> 00:06:43.694
And again, like we've already learned,

138
00:06:43.694 --> 00:06:47.277
JSF will call student_three_response.xhtml.

139
00:06:50.747 --> 00:06:52.651
And that's pretty much it for our form.

140
00:06:52.651 --> 00:06:53.484
Good job.

141
00:06:55.047 --> 00:06:58.754
Okay, so now, moving forward, our last step is updating

142
00:06:58.754 --> 00:07:00.825
the confirmation page.

143
00:07:00.825 --> 00:07:04.230
So I'll move back over to the project listing here,

144
00:07:04.230 --> 00:07:08.740
I'll take a look at this file, student_three_response.xhtml,

145
00:07:08.740 --> 00:07:10.597
I'll double-click this file, and go ahead

146
00:07:10.597 --> 00:07:13.180
and open it here in the editor.

147
00:07:14.800 --> 00:07:16.216
And I'll expand the window.

148
00:07:16.216 --> 00:07:18.000
Again, not much here.

149
00:07:18.000 --> 00:07:21.286
Simply on line 12, shows the student's name,

150
00:07:21.286 --> 00:07:24.449
first and last, and on line 16, we display

151
00:07:24.449 --> 00:07:25.911
the student's phone number.

152
00:07:25.911 --> 00:07:28.063
So again, not much really happening here.

153
00:07:28.063 --> 00:07:30.346
We're simply displaying the student's phone number

154
00:07:30.346 --> 00:07:32.848
once they've passed the validation rules.

155
00:07:32.848 --> 00:07:35.405
Alright, so this all looks really good so far.

156
00:07:35.405 --> 00:07:36.238
Good job.

157
00:07:37.876 --> 00:07:39.659
Okay, so I just ran the application.

158
00:07:39.659 --> 00:07:42.620
Here's our form, so I'll go ahead and enter the information

159
00:07:42.620 --> 00:07:45.325
for first name and last name, and then I'll go ahead

160
00:07:45.325 --> 00:07:46.459
and enter a phone number.

161
00:07:46.459 --> 00:07:48.734
And I'll just enter some bad data, hit submit,

162
00:07:48.734 --> 00:07:50.599
and it's gonna give me this error message.

163
00:07:50.599 --> 00:07:52.952
The phone number must follow the format of

164
00:07:52.952 --> 00:07:57.654
three digits, hyphen, three digits, hyphen, four digits.

165
00:07:57.654 --> 00:07:59.850
Alright, so we'll need to follow that appropriate format

166
00:07:59.850 --> 00:08:01.994
for our input data for phone number.

167
00:08:01.994 --> 00:08:04.061
So I'll clear this out and I'll go ahead

168
00:08:04.061 --> 00:08:06.478
and give some good data here.

169
00:08:07.313 --> 00:08:11.480
And then I'll go through and hit the submit button,

170
00:08:12.582 --> 00:08:13.603
and I'll pass all the validation rules,

171
00:08:13.603 --> 00:08:16.385
and I'll make it to the confirmation page.

172
00:08:16.385 --> 00:08:17.802
So this is great.

173
00:08:20.931 --> 00:08:22.916
Alright, so we accomplished some good work here.

174
00:08:22.916 --> 00:08:25.349
So we started off with the regular expression demo,

175
00:08:25.349 --> 00:08:27.905
and then we went through and we validated information

176
00:08:27.905 --> 00:08:29.772
with a regular expression.

177
00:08:29.772 --> 00:08:32.082
And then finally, we pulled it all together

178
00:08:32.082 --> 00:08:34.665
with the full JSF page example.

179
00:08:35.660 --> 00:08:36.493
Great job.

180
00:08:40.680 --> 00:08:42.222
Well, this wraps up the video.

181
00:08:42.222 --> 00:08:45.548
In this video, we learned how to do JSF validation

182
00:08:45.548 --> 00:08:47.631
with regular expressions.