WEBVTT 1 00:00:01.539 --> 00:00:02.372 Hey. 2 00:00:02.372 --> 00:00:03.205 Welcome back. 3 00:00:03.205 --> 00:00:06.053 In this video we're going to cover JSF validation 4 00:00:06.053 --> 00:00:07.803 for range and length. 5 00:00:11.832 --> 00:00:13.332 We're going to cover the following topics. 6 00:00:13.332 --> 00:00:16.858 First, we'll start off with a validation demo, 7 00:00:16.858 --> 00:00:20.168 then we'll validate a number range. 8 00:00:20.168 --> 00:00:23.880 Next, we'll learn how to validate input length. 9 00:00:23.880 --> 00:00:26.179 And then finally, we'll pull it all together 10 00:00:26.179 --> 00:00:28.596 with a full JSF page example. 11 00:00:29.841 --> 00:00:31.660 Alright, so a lot of good things in store. 12 00:00:31.660 --> 00:00:33.910 Let's go ahead and dive in. 13 00:00:37.334 --> 00:00:39.478 Let's take a look at our application demo. 14 00:00:39.478 --> 00:00:40.862 line:15% We're going to have two fields, free passes. 15 00:00:40.862 --> 00:00:44.266 line:15% You can only free passes in the value of in the range 16 00:00:44.266 --> 00:00:48.015 line:15% zero to 10 and the postal code can only have five 17 00:00:48.015 --> 00:00:49.711 line:15% digits of characters. 18 00:00:49.711 --> 00:00:50.997 line:15% So, just to kinda walk through a demo here 19 00:00:50.997 --> 00:00:53.580 line:15% to show you how this one works. 20 00:00:54.933 --> 00:00:57.904 line:15% So for free passes I gave 33 which is of course 21 00:00:57.904 --> 00:00:58.996 line:15% outside of the range. 22 00:00:58.996 --> 00:01:02.643 And for postal code, I'll give a lot of numbers here 23 00:01:02.643 --> 00:01:05.087 which again is outside the rule. 24 00:01:05.087 --> 00:01:06.417 And then you hit submit and it gives 25 00:01:06.417 --> 00:01:07.681 us our validation errors. 26 00:01:07.681 --> 00:01:12.000 So for free passes, it tells us that it's not between 27 00:01:12.000 --> 00:01:14.917 the expected values of zero and 10. 28 00:01:15.753 --> 00:01:18.737 And for the postal code we can only have five digits 29 00:01:18.737 --> 00:01:21.796 or characters and it's greater than the allowable 30 00:01:21.796 --> 00:01:23.788 maximum of five. 31 00:01:23.788 --> 00:01:26.857 So, I can try and fix this for free passes, just enter the 32 00:01:26.857 --> 00:01:29.280 value of four, so it takes care of that rule. 33 00:01:29.280 --> 00:01:33.213 But our postal code still has the error, so I need to change 34 00:01:33.213 --> 00:01:35.713 this to only have five digits. 35 00:01:38.003 --> 00:01:40.693 And then when I hit submit, this will actually clean it up, 36 00:01:40.693 --> 00:01:42.183 pass all the validation rules, 37 00:01:42.183 --> 00:01:44.595 and we get our confirmation page. 38 00:01:44.595 --> 00:01:46.529 In the following slides, we're going to dive in 39 00:01:46.529 --> 00:01:49.351 and I'll show you how to write all the appropriate code 40 00:01:49.351 --> 00:01:51.242 for those validation rules. 41 00:01:51.242 --> 00:01:54.825 Alright, so let's go ahead and get started. 42 00:01:59.728 --> 00:02:02.123 Let's take a look at our first validation rule. 43 00:02:02.123 --> 00:02:04.415 What we want to do is validate a number range, 44 00:02:04.415 --> 00:02:07.843 so for free passes the user can only enter a range 45 00:02:07.843 --> 00:02:09.010 of zero to 10. 46 00:02:09.955 --> 00:02:12.555 So here on the slide we have our input text. 47 00:02:12.555 --> 00:02:15.461 We have value of student two dot free passes, 48 00:02:15.461 --> 00:02:16.908 that's our bean binding. 49 00:02:16.908 --> 00:02:19.458 Then inside of this input text we have this new 50 00:02:19.458 --> 00:02:22.161 element here, validate long range. 51 00:02:22.161 --> 00:02:25.165 So you can specify them minimum value of zero 52 00:02:25.165 --> 00:02:27.524 and the maximum value of 10 and you put any values in there 53 00:02:27.524 --> 00:02:30.268 that you would like, but that's the rule 54 00:02:30.268 --> 00:02:32.759 we're going to apply for this given validation rule 55 00:02:32.759 --> 00:02:34.092 for our example. 56 00:02:38.633 --> 00:02:40.340 Now, the next rule that we want to implement 57 00:02:40.340 --> 00:02:42.725 is for input length so, when the user enters a postal 58 00:02:42.725 --> 00:02:46.627 code they can only enter five digits or characters. 59 00:02:46.627 --> 00:02:50.351 So, here we have our input texts, we have value, student 60 00:02:50.351 --> 00:02:53.599 two dot postal code, again our bean binding here for 61 00:02:53.599 --> 00:02:54.682 managed bean. 62 00:02:55.590 --> 00:02:59.293 Then, inside of this input text, we have a new element, 63 00:02:59.293 --> 00:03:00.649 validate length. 64 00:03:00.649 --> 00:03:03.772 So here, you can specify the minimum number of digits 65 00:03:03.772 --> 00:03:05.500 and the maximum number. 66 00:03:05.500 --> 00:03:07.985 So here I have min five, max five. 67 00:03:07.985 --> 00:03:09.402 No more, no less. 68 00:03:10.380 --> 00:03:12.749 And that's it for that validation rule. 69 00:03:12.749 --> 00:03:15.059 So now, let's go ahead and pull it all together. 70 00:03:15.059 --> 00:03:17.795 So, it the top left, I'm going to have a student two form 71 00:03:17.795 --> 00:03:21.142 that's going to have our form elements for free passes 72 00:03:21.142 --> 00:03:22.342 and postal code. 73 00:03:22.342 --> 00:03:25.080 In the center, I'm going to have a managed bean. 74 00:03:25.080 --> 00:03:28.406 I'm going to call this managed bean student two. 75 00:03:28.406 --> 00:03:30.245 And then, at the bottom, we're going to have 76 00:03:30.245 --> 00:03:31.078 our response page. 77 00:03:31.078 --> 00:03:33.290 And so on the response page, it'll have the student's name, 78 00:03:33.290 --> 00:03:37.605 the number free passes, and the actual postal code 79 00:03:37.605 --> 00:03:39.105 that they entered. 80 00:03:43.552 --> 00:03:44.861 Here's our to do list. 81 00:03:44.861 --> 00:03:47.408 First thing we need to do is add new managed bean class 82 00:03:47.408 --> 00:03:49.359 called student two. 83 00:03:49.359 --> 00:03:52.210 It's going to have the fields for first name, last name, 84 00:03:52.210 --> 00:03:55.308 free passes and postal code. 85 00:03:55.308 --> 00:03:57.339 Then, we need to update the form to make use of 86 00:03:57.339 --> 00:03:59.256 those validation rules. 87 00:04:00.145 --> 00:04:02.654 And then, we'll go ahead and update the confirmation page 88 00:04:02.654 --> 00:04:05.999 to display the number of free passes and the student's 89 00:04:05.999 --> 00:04:07.592 postal code. 90 00:04:07.592 --> 00:04:09.725 Alright, so we have a lot of good stuff in store here. 91 00:04:09.725 --> 00:04:13.058 Let's go ahead and dive into the coding. 92 00:04:17.387 --> 00:04:19.696 Let's go ahead and move into Eclipse. 93 00:04:19.696 --> 00:04:21.765 What I would like to do is make use the existing project 94 00:04:21.765 --> 00:04:25.515 that we created earlier called validate demo. 95 00:04:29.812 --> 00:04:30.962 And what I would like to do is move 96 00:04:30.962 --> 00:04:34.543 into the source directory, into our packaged validate demo/ 97 00:04:34.543 --> 00:04:36.566 And, we're going to create a managed bean. 98 00:04:36.566 --> 00:04:38.321 Now, I'm not going to create if from scratch because 99 00:04:38.321 --> 00:04:40.292 we've done a lot of this work before. 100 00:04:40.292 --> 00:04:42.743 And this is simply an enhancement of the managed bean 101 00:04:42.743 --> 00:04:44.283 from the previous video. 102 00:04:44.283 --> 00:04:46.862 So, I'll just kinda walk through the code that I have here. 103 00:04:46.862 --> 00:04:49.797 So, this is for our managed bean called student two. 104 00:04:49.797 --> 00:04:53.297 We have the managed bean annotation on it. 105 00:04:54.159 --> 00:04:55.617 This managed bean is going to hold the form data 106 00:04:55.617 --> 00:04:57.796 so we have four fields here. 107 00:04:57.796 --> 00:05:01.945 First name, last name, postal code and free passes. 108 00:05:01.945 --> 00:05:06.112 The two new items here are postal code and free passes. 109 00:05:09.957 --> 00:05:12.494 We have our normal, no argument constructor. 110 00:05:12.494 --> 00:05:15.327 It has the same name as the class. 111 00:05:16.219 --> 00:05:18.330 And then I simply made use of that Eclipse trick earlier 112 00:05:18.330 --> 00:05:21.087 to generate the getters and setters. 113 00:05:21.087 --> 00:05:22.791 So, that's the getters and setters for first name, 114 00:05:22.791 --> 00:05:25.541 getter and setters for last name. 115 00:05:27.850 --> 00:05:30.933 A similar thing here for postal code. 116 00:05:32.593 --> 00:05:35.987 And the finally, getters and setters for free passes. 117 00:05:35.987 --> 00:05:37.331 So, this is already in place. 118 00:05:37.331 --> 00:05:39.214 A very basic bean. 119 00:05:39.214 --> 00:05:42.297 We've done a lot of this work before. 120 00:05:49.621 --> 00:05:51.853 Now, what I'd like to do is move over and update 121 00:05:51.853 --> 00:05:52.936 our JSF form. 122 00:05:54.232 --> 00:05:57.390 So, in our web content directory 123 00:05:57.390 --> 00:06:01.557 we have a file here called student two for dot x html. 124 00:06:03.258 --> 00:06:05.341 And again, this form is very similar to the form we 125 00:06:05.341 --> 00:06:07.746 created in the previous video, so I"m not going to cover 126 00:06:07.746 --> 00:06:09.263 everything in the form. 127 00:06:09.263 --> 00:06:11.674 I"ll just kind of move down and highlight the new elements 128 00:06:11.674 --> 00:06:13.706 we have entered here. 129 00:06:13.706 --> 00:06:16.776 So here's our form, and we have all the other stuff 130 00:06:16.776 --> 00:06:18.715 for first name and last name. 131 00:06:18.715 --> 00:06:20.183 And I'll just moved down to this section 132 00:06:20.183 --> 00:06:21.933 here for free passes. 133 00:06:28.574 --> 00:06:32.509 So, for free passes, we have an input text. 134 00:06:32.509 --> 00:06:34.912 We have the value of student two dot free passes, 135 00:06:34.912 --> 00:06:37.819 just binding it to that managed bean. 136 00:06:37.819 --> 00:06:39.895 And now we're going to enter our validation rules. 137 00:06:39.895 --> 00:06:42.902 This is most important piece of it for this video. 138 00:06:42.902 --> 00:06:45.138 Our validate for long range, remember for free passes 139 00:06:45.138 --> 00:06:49.076 that the user can have a range for zero to 10. 140 00:06:49.076 --> 00:06:52.243 So a minimum of zero, a maximum of 10. 141 00:06:55.460 --> 00:06:59.386 And that takes care of the rule there for free passes. 142 00:06:59.386 --> 00:07:02.442 line:15% And a little bit lower, we have our h message, 143 00:07:02.442 --> 00:07:05.623 line:15% so if there are any error messages for this validation rule, 144 00:07:05.623 --> 00:07:09.290 line:15% then it will show just next that form field. 145 00:07:13.575 --> 00:07:15.300 line:15% Alright, so let's go ahead and take a look at the 146 00:07:15.300 --> 00:07:17.467 line:15% work here for postal code. 147 00:07:20.806 --> 00:07:23.873 line:15% So, we have our postal code. 148 00:07:23.873 --> 00:07:26.491 And we have an input text item for postal code, 149 00:07:26.491 --> 00:07:29.077 the value again, we bind it to our managed bean, 150 00:07:29.077 --> 00:07:31.930 student two dot postal code. 151 00:07:31.930 --> 00:07:33.429 And then our validation rule here, 152 00:07:33.429 --> 00:07:35.093 again our most important piece. 153 00:07:35.093 --> 00:07:38.159 For our postal, we said that we wanted to have 154 00:07:38.159 --> 00:07:40.557 five characters or digits, so no more, no less. 155 00:07:40.557 --> 00:07:44.153 So the minimum equals five, the maximum equals five. 156 00:07:44.153 --> 00:07:48.320 And that's our validation rule there for our postal code. 157 00:07:52.520 --> 00:07:55.027 Likewise, we have little error message item here for 158 00:07:55.027 --> 00:07:57.939 postal code in the event that error occurs it will show 159 00:07:57.939 --> 00:08:02.106 the error message just to the right of the form field. 160 00:08:08.926 --> 00:08:13.499 line:15% And then finally at the bottom, we have our submit button. 161 00:08:13.499 --> 00:08:15.973 line:15% And then the action of student two response. 162 00:08:15.973 --> 00:08:18.657 line:15% And recall from all the previous videos, JSF will send 163 00:08:18.657 --> 00:08:22.824 line:15% this to a file called student two response dot x html. 164 00:08:24.323 --> 00:08:25.156 Great. 165 00:08:25.156 --> 00:08:26.806 Well, we're making some good progress here. 166 00:08:26.806 --> 00:08:28.435 The last thing that we need to is update 167 00:08:28.435 --> 00:08:31.782 our confirmation page to display the number of passes 168 00:08:31.782 --> 00:08:34.610 and the user's postal code. 169 00:08:34.610 --> 00:08:37.132 So again, very similar to the confirmation page from 170 00:08:37.132 --> 00:08:41.173 the previous video, so I here I simply give the student name 171 00:08:41.173 --> 00:08:44.753 line:15% and then I display the free passes, and then display 172 00:08:44.753 --> 00:08:46.307 line:15% the actual postal code. 173 00:08:46.307 --> 00:08:48.682 line:15% So, we're simply calling that managed bean 174 00:08:48.682 --> 00:08:51.692 line:15% and displaying the information. 175 00:08:51.692 --> 00:08:52.685 So, that's pretty much it. 176 00:08:52.685 --> 00:08:55.443 So, we got a lot of good stuff here for this little demo. 177 00:08:55.443 --> 00:08:57.259 So, let's go ahead and pull it all together and 178 00:08:57.259 --> 00:08:58.926 run the application. 179 00:09:03.323 --> 00:09:05.497 Okay, so we have the application running here. 180 00:09:05.497 --> 00:09:08.989 For first name I will enter John, last name of Doe. 181 00:09:08.989 --> 00:09:12.010 For free passes, I'm going to give a very large number 182 00:09:12.010 --> 00:09:16.225 of 33, which is of course outside of our range. 183 00:09:16.225 --> 00:09:20.029 And for postal code, I'm going to give a lot of digits here 184 00:09:20.029 --> 00:09:23.223 again, that's going to exceed the maximum of five. 185 00:09:23.223 --> 00:09:26.667 And I'll just test this out by hitting submit. 186 00:09:26.667 --> 00:09:27.637 Okay, great. 187 00:09:27.637 --> 00:09:31.852 So, our validation errors are coming though as expected. 188 00:09:31.852 --> 00:09:35.813 So free passes is not between the values of zero and 10. 189 00:09:35.813 --> 00:09:40.305 Okay, so we know our validation rule is working there. 190 00:09:40.305 --> 00:09:42.864 And also, for postal code, it says the length 191 00:09:42.864 --> 00:09:45.975 is great than the allowable max of five. 192 00:09:45.975 --> 00:09:47.915 Which is of course good. 193 00:09:47.915 --> 00:09:50.115 So, let's go ahead and fix it for our free passes. 194 00:09:50.115 --> 00:09:52.600 Submit the value of four, hit submit. 195 00:09:52.600 --> 00:09:54.495 It's still catching me on postal code. 196 00:09:54.495 --> 00:09:58.023 So, I need to ahead and fix that entry there 197 00:09:58.023 --> 00:10:00.273 and only have five numbers. 198 00:10:02.864 --> 00:10:04.073 And I'll hit submit. 199 00:10:04.073 --> 00:10:06.556 And it goes through to our confirmation page. 200 00:10:06.556 --> 00:10:08.263 We passed all the validation rules. 201 00:10:08.263 --> 00:10:09.769 So we're good to go. 202 00:10:09.769 --> 00:10:10.752 So, this is cool. 203 00:10:10.752 --> 00:10:13.363 So, we can see how this all works out together with our 204 00:10:13.363 --> 00:10:16.599 validation rules for length and range. 205 00:10:16.599 --> 00:10:17.432 Good job. 206 00:10:23.886 --> 00:10:26.117 So, in summary in the video we started we off 207 00:10:26.117 --> 00:10:28.363 with just a validation demo upfront. 208 00:10:28.363 --> 00:10:30.716 Then we learned how to validate a number range. 209 00:10:30.716 --> 00:10:33.914 We also learned how to validate an input length. 210 00:10:33.914 --> 00:10:37.406 And then finally we pulled it all together with a really 211 00:10:37.406 --> 00:10:39.239 good JSF page example. 212 00:10:45.005 --> 00:10:46.662 Well, this wraps up the video. 213 00:10:46.662 --> 00:10:49.519 In this video, we learned how to do JSF validation 214 00:10:49.519 --> 00:10:51.352 for range and length.