WEBVTT 1 00:00:02.318 --> 00:00:03.590 Hey hey. 2 00:00:03.590 --> 00:00:07.757 In this video we're gonna do custom validation with JSF. 3 00:00:11.189 --> 00:00:13.261 We'll cover the following topics. 4 00:00:13.261 --> 00:00:16.901 We'll first start off with a demo of custom validation 5 00:00:16.901 --> 00:00:17.743 and then we'll learn how 6 00:00:17.743 --> 00:00:21.643 to actually implement the code for custom validation 7 00:00:21.643 --> 00:00:23.960 and, finally, we'll pull it all together 8 00:00:23.960 --> 00:00:26.937 with a full JSF page example 9 00:00:26.937 --> 00:00:28.511 and we'll actually have some fun with this. 10 00:00:28.511 --> 00:00:30.386 I have a really fun business rule 11 00:00:30.386 --> 00:00:32.679 that we'll implement for our custom validation. 12 00:00:32.679 --> 00:00:36.096 So we'll have a little fun with this one. 13 00:00:36.991 --> 00:00:38.458 So the fun part of this video is 14 00:00:38.458 --> 00:00:41.535 that we'll have a course code and our course code will have 15 00:00:41.535 --> 00:00:44.687 to follow a special business rule validation. 16 00:00:44.687 --> 00:00:46.217 line:15% In fact, it'll actually have to start 17 00:00:46.217 --> 00:00:49.613 line:15% with the word LUV for luv2code. 18 00:00:49.613 --> 00:00:51.659 line:15% So I'll enter the first name, last name. 19 00:00:51.659 --> 00:00:54.701 line:15% I'll enter any weird course code here, 20 00:00:54.701 --> 00:00:56.368 line:15% and I'll hit submit. 21 00:00:58.689 --> 00:01:00.155 And we'll see that the error message says that 22 00:01:00.155 --> 00:01:03.669 course code must start with LUV for luv 2 code. 23 00:01:03.669 --> 00:01:06.171 That's the fun part, I'm all about love. 24 00:01:06.171 --> 00:01:08.730 So what we need to do here is we have 25 00:01:08.730 --> 00:01:12.897 to clean up the course code so here I'll say LUV123 26 00:01:13.805 --> 00:01:15.888 and then I'll hit submit. 27 00:01:17.088 --> 00:01:18.245 And so this passes. 28 00:01:18.245 --> 00:01:19.395 So in the background I have 29 00:01:19.395 --> 00:01:22.721 that little weird custom business rule that I created 30 00:01:22.721 --> 00:01:26.545 to actually validate the information for a form field. 31 00:01:26.545 --> 00:01:28.880 And I'll actually show you how to write the code for that 32 00:01:28.880 --> 00:01:31.696 and how to implement your own custom validation rule 33 00:01:31.696 --> 00:01:33.210 in this video. 34 00:01:33.210 --> 00:01:35.793 I'll show you that in a second. 35 00:01:39.225 --> 00:01:40.833 Alright so at every company you'll have 36 00:01:40.833 --> 00:01:42.760 to set up a custom validation, right? 37 00:01:42.760 --> 00:01:45.098 So for your company you have special rules 38 00:01:45.098 --> 00:01:46.795 that you need to implement. 39 00:01:46.795 --> 00:01:49.651 So, in my case, I had a course code 40 00:01:49.651 --> 00:01:51.961 and I had the funny rule that hey, 41 00:01:51.961 --> 00:01:53.286 the course code must start 42 00:01:53.286 --> 00:01:56.706 with the letters LUV for love 2 code. 43 00:01:56.706 --> 00:01:59.132 So what you can do here is you can make use 44 00:01:59.132 --> 00:02:03.515 of JSF so your form can call your custom validation method 45 00:02:03.515 --> 00:02:06.585 that resides on your MangedBean. 46 00:02:06.585 --> 00:02:09.488 This custom message will read the input 47 00:02:09.488 --> 00:02:11.799 and determine if it passes or fails. 48 00:02:11.799 --> 00:02:16.170 And if it fails, it'll actually throw an exception. 49 00:02:16.170 --> 00:02:18.445 And I'll show you how to write the code for this method, 50 00:02:18.445 --> 00:02:20.778 coming up on the next slide. 51 00:02:24.192 --> 00:02:28.093 Alright so we can create our own custom validation method 52 00:02:28.093 --> 00:02:31.562 and we actually define it inside of our ManagedBean. 53 00:02:31.562 --> 00:02:34.580 So really all you do here is you defined a method, 54 00:02:34.580 --> 00:02:38.513 in this case my method name is validateTheCourseCode. 55 00:02:38.513 --> 00:02:41.242 This method will take in three parameters: 56 00:02:41.242 --> 00:02:45.279 a context, a component, and the Object value. 57 00:02:45.279 --> 00:02:48.026 Value is the actual data that the user entered 58 00:02:48.026 --> 00:02:50.292 so inside of this method you can say 59 00:02:50.292 --> 00:02:54.831 if the value does not passed, then we throw an exception. 60 00:02:54.831 --> 00:02:59.098 If the value passes, then the method ends gracefully. 61 00:02:59.098 --> 00:03:01.965 So, in this case, no news good news. 62 00:03:01.965 --> 00:03:05.139 Now when you define the method you can really give any name 63 00:03:05.139 --> 00:03:06.603 that you want for the method. 64 00:03:06.603 --> 00:03:08.702 Here I've called it validateTheCourseCode. 65 00:03:08.702 --> 00:03:11.552 You could call it process, do some work, 66 00:03:11.552 --> 00:03:14.111 anything as long as it's public void 67 00:03:14.111 --> 00:03:16.125 and it accepts those three parameters: 68 00:03:16.125 --> 00:03:19.208 context, component, and Object value. 69 00:03:22.013 --> 00:03:24.155 Alright so now that we have our method created, 70 00:03:24.155 --> 00:03:26.239 let's move into our JSF form. 71 00:03:26.239 --> 00:03:29.540 So in our JSF form we have our normal inputText 72 00:03:29.540 --> 00:03:32.414 with our studentFour.courseCode. 73 00:03:32.414 --> 00:03:36.037 Now note this new entry here for validator. 74 00:03:36.037 --> 00:03:40.204 We have validator="#{studentFour.validateTheCourseCode}" 75 00:03:41.824 --> 00:03:44.918 so effectively what I'm doing here is I'm telling it, 76 00:03:44.918 --> 00:03:48.904 line:15% hey to validate this field, call this method. 77 00:03:48.904 --> 00:03:51.884 line:15% And so this method is defined in our ManagedBean 78 00:03:51.884 --> 00:03:54.181 line:15% and we saw that on the previous slide. 79 00:03:54.181 --> 00:03:55.707 line:15% So when I hit submit, 80 00:03:55.707 --> 00:03:58.772 line:15% JSF will call that method validateTheCourseCode 81 00:03:58.772 --> 00:04:00.731 line:15% and it'll pass in those three parameters: 82 00:04:00.731 --> 00:04:04.365 line:15% the context, the UI component, and the Object value 83 00:04:04.365 --> 00:04:08.198 line:15% that the user entered and that's basically it. 84 00:04:09.282 --> 00:04:11.370 Alright so let's pull it all together. 85 00:04:11.370 --> 00:04:13.391 In the top left we'll have our form 86 00:04:13.391 --> 00:04:17.876 that has the new field here for our course code. 87 00:04:17.876 --> 00:04:20.288 In the center we're gonna have our Managed Bean, 88 00:04:20.288 --> 00:04:22.662 StudentFour, that holds the form data plus 89 00:04:22.662 --> 00:04:25.280 that custom validation method. 90 00:04:25.280 --> 00:04:27.880 And at the bottom we'll have our confirmation page 91 00:04:27.880 --> 00:04:31.809 or our response page that'll simply display the course code 92 00:04:31.809 --> 00:04:32.809 to the user. 93 00:04:39.293 --> 00:04:41.778 Alright so let's take a look at our to-do list. 94 00:04:41.778 --> 00:04:42.617 So the first thing we need 95 00:04:42.617 --> 00:04:46.109 to do is add a new ManagedBean class, StudentFour. 96 00:04:46.109 --> 00:04:47.241 It's gonna have those fields 97 00:04:47.241 --> 00:04:51.270 for firstName, lastName, and courseCode 98 00:04:51.270 --> 00:04:56.003 and we'll also add our custom validator method, 99 00:04:56.003 --> 00:04:58.978 update the form to call the custom validator, 100 00:04:58.978 --> 00:05:01.939 and then finally we'll update the confirmation page 101 00:05:01.939 --> 00:05:04.638 to display that new course code. 102 00:05:04.638 --> 00:05:06.145 Alright I'm excited here. 103 00:05:06.145 --> 00:05:09.562 Let's jump into Eclipse and start coding. 104 00:05:11.807 --> 00:05:13.623 Alright so we're in Eclipse. 105 00:05:13.623 --> 00:05:15.122 What we're gonna do is, again, 106 00:05:15.122 --> 00:05:18.372 use an existing project, validate-demo. 107 00:05:22.128 --> 00:05:24.595 The first thing I need to do is create the Managed Bean 108 00:05:24.595 --> 00:05:26.899 so I move down to the Java src directory, 109 00:05:26.899 --> 00:05:28.827 through our package, and, again, 110 00:05:28.827 --> 00:05:30.261 we're not gonna create it from scratch. 111 00:05:30.261 --> 00:05:32.142 We'll start with the existing code 112 00:05:32.142 --> 00:05:34.058 since we've done a lot of this work before 113 00:05:34.058 --> 00:05:36.769 and I'll kinda walk through each part of it. 114 00:05:36.769 --> 00:05:40.602 So this is StudentFour.java, our Managed Bean. 115 00:05:43.748 --> 00:05:44.931 We're gonna have three fields here 116 00:05:44.931 --> 00:05:48.647 for this bean: firstName, lastName, and courseCode. 117 00:05:48.647 --> 00:05:50.903 And, remember, courseCode is this new field 118 00:05:50.903 --> 00:05:52.986 that we're tracking here. 119 00:05:56.250 --> 00:05:57.300 And our regular work 120 00:05:57.300 --> 00:06:00.569 of having our no-arg constructor StudentFour 121 00:06:00.569 --> 00:06:02.470 (the same name as the class), all 122 00:06:02.470 --> 00:06:06.027 of our getters and setters, and the new section here 123 00:06:06.027 --> 00:06:09.380 for getCourseCode setCourseCode. 124 00:06:09.380 --> 00:06:12.880 That's our new item that we've added here. 125 00:06:14.587 --> 00:06:15.968 And then I'll just move down a bit 126 00:06:15.968 --> 00:06:18.871 to our custom validation method 127 00:06:18.871 --> 00:06:21.521 called validateTheCourseCode. 128 00:06:21.521 --> 00:06:24.873 Now this method can have any name that you want 129 00:06:24.873 --> 00:06:27.333 as long as it follows this signature public void 130 00:06:27.333 --> 00:06:29.610 and then here, validateTheCourseCode, 131 00:06:29.610 --> 00:06:30.885 you can give it any name you want. 132 00:06:30.885 --> 00:06:33.830 You can call it foo, process, do the work 133 00:06:33.830 --> 00:06:35.531 as long as it's public void 134 00:06:35.531 --> 00:06:39.650 and it accepts these three parameters being passed in. 135 00:06:39.650 --> 00:06:42.477 So it must accept the FacesContext, 136 00:06:42.477 --> 00:06:45.949 the actual UIComponent, and the Object value. 137 00:06:45.949 --> 00:06:47.947 Now Object value that's very important 138 00:06:47.947 --> 00:06:50.363 because that actually holds the text 139 00:06:50.363 --> 00:06:52.341 that the user entered. 140 00:06:52.341 --> 00:06:54.966 And if there's a problem during this validation, 141 00:06:54.966 --> 00:06:58.298 we're gonna throw an error or throw an exception. 142 00:06:58.298 --> 00:06:59.906 So this is the basic definition 143 00:06:59.906 --> 00:07:02.083 that you would have for a validation method, 144 00:07:02.083 --> 00:07:06.250 but, again, the actual name of the method can be anything. 145 00:07:09.804 --> 00:07:11.441 Alright so here I just check the value 146 00:07:11.441 --> 00:07:12.402 to check if it's null. 147 00:07:12.402 --> 00:07:14.288 If it's null, I simply just return, 148 00:07:14.288 --> 00:07:17.012 meaning I'm not gonna validate on it. 149 00:07:17.012 --> 00:07:19.539 Here I take the value and I get String version of it. 150 00:07:19.539 --> 00:07:24.443 That's the actual String data that the user entered. 151 00:07:24.443 --> 00:07:26.990 And then on line 55 this is my documentation 152 00:07:26.990 --> 00:07:29.726 to myself like hey this is the business rule: 153 00:07:29.726 --> 00:07:32.494 the course code must start with LUV, 154 00:07:32.494 --> 00:07:34.094 again, we're having fun here right? 155 00:07:34.094 --> 00:07:36.510 All about love, it must start with LUV. 156 00:07:36.510 --> 00:07:38.464 If not, throw an exception. 157 00:07:38.464 --> 00:07:41.464 So on line 56 I check to see if data 158 00:07:42.468 --> 00:07:44.471 so I have the exclamation point meaning not, 159 00:07:44.471 --> 00:07:47.408 so if data does not start with LUV, 160 00:07:47.408 --> 00:07:50.780 then there's a problem or we need to throw an exception. 161 00:07:50.780 --> 00:07:52.395 So here I put a FacesMessage, 162 00:07:52.395 --> 00:07:54.915 which is basically like our error message, 163 00:07:54.915 --> 00:07:56.363 it's really just a generic message, 164 00:07:56.363 --> 00:07:58.948 but here I'm gonna use it as an error message. 165 00:07:58.948 --> 00:08:00.522 So I create a new FacesMessage 166 00:08:00.522 --> 00:08:04.433 with the actual problem, "Course code must start with LUV," 167 00:08:04.433 --> 00:08:06.925 and then I actually throw the exception based 168 00:08:06.925 --> 00:08:08.292 on that message. 169 00:08:08.292 --> 00:08:12.048 And over in our JSF page when we use our h:message, 170 00:08:12.048 --> 00:08:14.922 then that'll display the appropriate error message here. 171 00:08:14.922 --> 00:08:17.086 So basically here I'm just checking the String 172 00:08:17.086 --> 00:08:19.920 to see if it does not start with LUV, 173 00:08:19.920 --> 00:08:22.059 then we're gonna throw an exception. 174 00:08:22.059 --> 00:08:23.594 So note the exclamation point there 175 00:08:23.594 --> 00:08:26.594 in front of the not data.startsWith. 176 00:08:30.245 --> 00:08:31.078 Alright so this looks good. 177 00:08:31.078 --> 00:08:33.196 So that's our custom validation method. 178 00:08:33.196 --> 00:08:35.366 Now moving to the next step what we need 179 00:08:35.366 --> 00:08:37.996 to do is actually call this validator method 180 00:08:37.996 --> 00:08:39.496 from our JSF form. 181 00:08:40.638 --> 00:08:44.805 So I'll open up our form here, student_four_form.xhtml. 182 00:08:47.215 --> 00:08:48.398 And, again, this is very similar 183 00:08:48.398 --> 00:08:52.495 to what we've done before in all previous videos. 184 00:08:52.495 --> 00:08:56.716 Just on line 17 we have a form and then I'll scroll on down 185 00:08:56.716 --> 00:08:58.422 and I'll highlight this one section here 186 00:08:58.422 --> 00:08:59.755 for course code. 187 00:09:06.847 --> 00:09:10.811 So we have the course code, we have our inputText. 188 00:09:10.811 --> 00:09:14.376 This value maps over to studentFour.courseCode 189 00:09:14.376 --> 00:09:16.043 in our Managed Bean. 190 00:09:18.115 --> 00:09:20.342 And the new entry here is for validator 191 00:09:20.342 --> 00:09:21.342 so this is where we're gonna call 192 00:09:21.342 --> 00:09:23.560 our custom validator method, 193 00:09:23.560 --> 00:09:26.530 studentFour.validateTheCourseCode. 194 00:09:26.530 --> 00:09:28.587 Now again, it could be any method name 195 00:09:28.587 --> 00:09:31.664 line:15% but here we called it validateTheCourseCode. 196 00:09:31.664 --> 00:09:34.752 line:15% When they do a submit, JSF will actually call this method 197 00:09:34.752 --> 00:09:37.281 line:15% and automatically pass in those three parameters 198 00:09:37.281 --> 00:09:39.616 line:15% (the FacesContext, the UIComponent, 199 00:09:39.616 --> 00:09:42.033 line:15% and the actual Object value). 200 00:09:44.719 --> 00:09:45.874 If there is an error, 201 00:09:45.874 --> 00:09:47.737 then we throw that FacesMessage, right? 202 00:09:47.737 --> 00:09:49.537 And we'll display the error here. 203 00:09:49.537 --> 00:09:52.020 If everything's okay, there are no error messages 204 00:09:52.020 --> 00:09:54.244 that it'll consider, then it'll proceed 205 00:09:54.244 --> 00:09:56.161 on with the submission. 206 00:10:01.112 --> 00:10:02.070 Alright so just moving on down 207 00:10:02.070 --> 00:10:06.273 to the bottom, we have our submit button. 208 00:10:06.273 --> 00:10:09.176 line:15% And then we have our action student_four_response 209 00:10:09.176 --> 00:10:11.521 line:15% and just remember from all the previous videos, 210 00:10:11.521 --> 00:10:15.021 line:15% JSF will call student_four_response.xhtml. 211 00:10:19.042 --> 00:10:20.116 line:15% Alright so this looks really good here 212 00:10:20.116 --> 00:10:22.366 for our JSF form, good job. 213 00:10:23.338 --> 00:10:24.679 Alright so the next thing we wanna do 214 00:10:24.679 --> 00:10:26.937 is update our confirmation page 215 00:10:26.937 --> 00:10:31.836 so I'll move here to student_four_response.xhtml. 216 00:10:31.836 --> 00:10:34.664 Again, very similar to what we had before, 217 00:10:34.664 --> 00:10:37.311 on line 12 we simply display the student's first name 218 00:10:37.311 --> 00:10:41.601 and last name and on line 16 is our new information 219 00:10:41.601 --> 00:10:43.963 where we display the student's course code 220 00:10:43.963 --> 00:10:46.361 by saying studentFour.courseCode. 221 00:10:46.361 --> 00:10:47.347 And that's basically it here 222 00:10:47.347 --> 00:10:50.930 for our confirmation page for our JSF page. 223 00:10:55.730 --> 00:10:57.686 Alright so let's go ahead and try this out. 224 00:10:57.686 --> 00:10:59.765 So I just ran the application. 225 00:10:59.765 --> 00:11:03.213 We have our form: first name, last name, and course code. 226 00:11:03.213 --> 00:11:04.450 And, again, our course code has 227 00:11:04.450 --> 00:11:06.676 that validation rule attached to it. 228 00:11:06.676 --> 00:11:10.003 So here I'll just enter anything for first name, last name, 229 00:11:10.003 --> 00:11:12.582 and then for course code I'll just enter some bad data. 230 00:11:12.582 --> 00:11:13.415 ABC1234. 231 00:11:15.583 --> 00:11:16.797 And this is where we're gonna have some fun 232 00:11:16.797 --> 00:11:19.442 with it here when I hit the submit button. 233 00:11:19.442 --> 00:11:21.986 It says hey, the course code must start with LUV. 234 00:11:21.986 --> 00:11:22.819 Love2code. 235 00:11:24.211 --> 00:11:28.231 So let's go back and clean up the course code 236 00:11:28.231 --> 00:11:30.945 and enter some good data that starts with LUV 237 00:11:30.945 --> 00:11:34.862 and 123 and then I can go ahead and hit submit. 238 00:11:36.807 --> 00:11:38.823 And this will pass my validation rule. 239 00:11:38.823 --> 00:11:40.807 I make it to the confirmation page 240 00:11:40.807 --> 00:11:44.684 and we see the desired course code accordingly. 241 00:11:44.684 --> 00:11:46.123 So this is great, good job. 242 00:11:46.123 --> 00:11:50.290 So we worked with adding in a new custom validation method. 243 00:11:55.071 --> 00:11:59.001 So in summary, we started off with a custom validation demo 244 00:11:59.001 --> 00:11:59.840 then we went through 245 00:11:59.840 --> 00:12:02.704 and we implemented a custom validation method 246 00:12:02.704 --> 00:12:04.719 and then we put it all together 247 00:12:04.719 --> 00:12:07.302 with the full JSF page example. 248 00:12:12.759 --> 00:12:14.245 Well this wraps up the video. 249 00:12:14.245 --> 00:12:15.455 In this video I showed you 250 00:12:15.455 --> 00:12:19.455 how to perform custom validation with JSF forms.