WEBVTT 1 00:00:00.913 --> 00:00:02.852 Hey, welcome back. 2 00:00:02.852 --> 00:00:06.058 In this video, we're gonna learn about form validation 3 00:00:06.058 --> 00:00:08.891 and how to set up required fields. 4 00:00:10.997 --> 00:00:13.747 We'll cover the following topics. 5 00:00:14.755 --> 00:00:16.769 We'll start off with required fields demo. 6 00:00:16.769 --> 00:00:18.872 Then, we'll learn how to create 7 00:00:18.872 --> 00:00:20.719 required fields on our form. 8 00:00:20.719 --> 00:00:22.614 And then, we'll move into displaying 9 00:00:22.614 --> 00:00:25.300 the validation error messages. 10 00:00:25.300 --> 00:00:27.165 And finally, we'll wrap it all up 11 00:00:27.165 --> 00:00:29.582 with a full JSF page example. 12 00:00:30.546 --> 00:00:32.445 So we have a lot of good things in store for this video. 13 00:00:32.445 --> 00:00:34.695 Let's go ahead and dive in. 14 00:00:39.536 --> 00:00:41.385 Let's start off first, by taking a look 15 00:00:41.385 --> 00:00:43.431 at a demo for the application. 16 00:00:43.431 --> 00:00:45.766 So I have a very basic form. 17 00:00:45.766 --> 00:00:47.357 I have two fields that are required, 18 00:00:47.357 --> 00:00:49.282 the last name and the email. 19 00:00:49.282 --> 00:00:50.362 Those two fields are required. 20 00:00:50.362 --> 00:00:52.500 First name is optional, 21 00:00:52.500 --> 00:00:54.898 so it's not required. 22 00:00:54.898 --> 00:00:57.985 So I'll just take a look at some of the fields here. 23 00:00:57.985 --> 00:01:02.422 And, what I'll do first off is I'll just hit submit. 24 00:01:02.422 --> 00:01:03.724 And it's gonna give me the error messages. 25 00:01:03.724 --> 00:01:05.180 So as I mentioned earlier, 26 00:01:05.180 --> 00:01:07.197 last name is required and also 27 00:01:07.197 --> 00:01:09.697 the email address is required. 28 00:01:12.491 --> 00:01:15.090 So I'll go back and I'll add some data for the first name. 29 00:01:15.090 --> 00:01:16.959 Some data for the last name. 30 00:01:16.959 --> 00:01:18.640 And then hit submit. 31 00:01:18.640 --> 00:01:19.801 And it says, "Okay, you're almost there, 32 00:01:19.801 --> 00:01:22.416 "but email address is still required." 33 00:01:22.416 --> 00:01:25.472 So I still need to give a value for email address. 34 00:01:25.472 --> 00:01:28.002 Okay, great, I'll go ahead and enter my email address. 35 00:01:28.002 --> 00:01:31.502 My email address is john.doe@luv2code.com. 36 00:01:34.152 --> 00:01:36.816 And then I'll hit submit. 37 00:01:36.816 --> 00:01:39.156 Okay, great, so this worked out fine. 38 00:01:39.156 --> 00:01:42.591 So, we gave the information for last name and email address. 39 00:01:42.591 --> 00:01:44.753 That passed the validation test. 40 00:01:44.753 --> 00:01:47.069 And it took us to the actual confirmation page. 41 00:01:47.069 --> 00:01:48.675 So we see that our validation rules 42 00:01:48.675 --> 00:01:51.342 are working as desired up front. 43 00:01:53.794 --> 00:01:54.651 And now what we'll do is 44 00:01:54.651 --> 00:01:55.553 we'll actually learn how to 45 00:01:55.553 --> 00:01:56.747 create those required fields. 46 00:01:56.747 --> 00:02:00.923 Like how to actually specify a field as being required. 47 00:02:00.923 --> 00:02:05.090 So here we have our normal snippet here from an html form. 48 00:02:06.764 --> 00:02:08.714 We'll have our input text. 49 00:02:08.714 --> 00:02:12.288 We'll have our value, studentOne.LastName. 50 00:02:12.288 --> 00:02:13.922 The next item here is the label. 51 00:02:13.922 --> 00:02:15.567 That's the actual label they'll use 52 00:02:15.567 --> 00:02:16.860 if there's a validation error. 53 00:02:16.860 --> 00:02:19.113 They'll tell you what the field name is, based on the label. 54 00:02:19.113 --> 00:02:22.600 Then also, here, we're gonna say required equals true. 55 00:02:22.600 --> 00:02:25.831 So here, pretty straightforward, right? 56 00:02:25.831 --> 00:02:27.285 This field is required. 57 00:02:27.285 --> 00:02:28.561 If you don't give this value, 58 00:02:28.561 --> 00:02:31.228 then it defaults to being false. 59 00:02:36.979 --> 00:02:40.130 Alright, great, now how do you display the error messages? 60 00:02:40.130 --> 00:02:43.263 So, you saw earlier how the error messages 61 00:02:43.263 --> 00:02:44.261 were displayed in red, 62 00:02:44.261 --> 00:02:46.145 in a bullet list at the top of the form. 63 00:02:46.145 --> 00:02:49.586 How do you set this up in a JSF page? 64 00:02:49.586 --> 00:02:50.639 Well over on the right hand side, 65 00:02:50.639 --> 00:02:52.595 we have a little snippet of the source code. 66 00:02:52.595 --> 00:02:54.700 And so take a look at line 20. 67 00:02:54.700 --> 00:02:58.310 On line 20, we're gonna make use of this new element 68 00:02:58.310 --> 00:03:00.643 called messages, h:messages. 69 00:03:02.559 --> 00:03:03.559 What this will do is, 70 00:03:03.559 --> 00:03:05.255 this will actually check to see 71 00:03:05.255 --> 00:03:07.027 if there are any error messages, 72 00:03:07.027 --> 00:03:09.123 and if so, it'll display those error messages 73 00:03:09.123 --> 00:03:10.968 as a bullet list. 74 00:03:10.968 --> 00:03:12.472 And, actually, it's more than just error messages. 75 00:03:12.472 --> 00:03:13.650 Basically any messages. 76 00:03:13.650 --> 00:03:15.587 But here, the case of error messages. 77 00:03:15.587 --> 00:03:18.303 We can also style the error messages. 78 00:03:18.303 --> 00:03:20.490 So we can set up a cascading style sheet 79 00:03:20.490 --> 00:03:22.787 style for the message. 80 00:03:22.787 --> 00:03:26.955 So here, I'm gonna define this class called, "Error." 81 00:03:26.955 --> 00:03:30.351 And up top on lines 10 through 12, 82 00:03:30.351 --> 00:03:32.829 we've specified that style for error. 83 00:03:32.829 --> 00:03:34.449 So basically we're saying, 84 00:03:34.449 --> 00:03:37.253 the color of the text is going to be red. 85 00:03:37.253 --> 00:03:39.753 Now, this is regular CSS work, 86 00:03:41.096 --> 00:03:42.798 or cascading style sheet work. 87 00:03:42.798 --> 00:03:44.177 You could define the styles 88 00:03:44.177 --> 00:03:45.735 on a separate file if you'd like, 89 00:03:45.735 --> 00:03:47.572 but here just to keep things simple, 90 00:03:47.572 --> 00:03:50.473 I put it in the same file as the JSF. 91 00:03:50.473 --> 00:03:51.987 But the key item here is, 92 00:03:51.987 --> 00:03:54.269 in order to display messages, 93 00:03:54.269 --> 00:03:56.852 you use the h:messages element. 94 00:04:03.453 --> 00:04:06.038 Alright, so let's pull this all together with an example. 95 00:04:06.038 --> 00:04:08.514 So on the top left we're gonna have our student form, 96 00:04:08.514 --> 00:04:09.767 first name, last name, email. 97 00:04:09.767 --> 00:04:12.738 The two fields for last name and email, 98 00:04:12.738 --> 00:04:14.125 those are gonna be required. 99 00:04:14.125 --> 00:04:16.190 In the center, we're gonna have a managed bean. 100 00:04:16.190 --> 00:04:17.934 I'll call it StudentOne. 101 00:04:17.934 --> 00:04:18.846 And then at the bottom, 102 00:04:18.846 --> 00:04:21.166 we'll have our StudentOne response page. 103 00:04:21.166 --> 00:04:23.198 This is basically just our confirmation page 104 00:04:23.198 --> 00:04:26.615 for the user and their email information. 105 00:04:27.746 --> 00:04:29.329 So those are the big pieces here 106 00:04:29.329 --> 00:04:31.498 that we'll have in the application. 107 00:04:31.498 --> 00:04:32.510 And I'll actually walk you through 108 00:04:32.510 --> 00:04:35.260 each one of those coming up here. 109 00:04:36.185 --> 00:04:37.995 Alright, so let's go ahead and move into Eclipse. 110 00:04:37.995 --> 00:04:40.087 We're gonna make use of that existing project 111 00:04:40.087 --> 00:04:42.971 that we created in a previous video, validate-demo. 112 00:04:42.971 --> 00:04:46.257 So this was already created on a previous video. 113 00:04:46.257 --> 00:04:47.496 What I'd like to do is, 114 00:04:47.496 --> 00:04:49.138 I'd like to start off with actually creating 115 00:04:49.138 --> 00:04:52.638 that JSF form to read the user input data. 116 00:04:53.655 --> 00:04:55.068 So I'll just right-click. 117 00:04:55.068 --> 00:04:58.235 Go to new, and I'll say new HTML file. 118 00:05:02.721 --> 00:05:06.888 The name of this file will be called student_one_form.xhtml. 119 00:05:11.592 --> 00:05:13.759 So student_one_form.xhtml. 120 00:05:15.474 --> 00:05:17.590 And then you can go ahead and click Finish 121 00:05:17.590 --> 00:05:19.757 once that data is entered. 122 00:05:25.589 --> 00:05:26.676 Now by default, they're gonna 123 00:05:26.676 --> 00:05:28.943 give you a very basic template. 124 00:05:28.943 --> 00:05:30.756 Again, like in some of the previous videos, 125 00:05:30.756 --> 00:05:33.025 just go ahead and highlight everything, 126 00:05:33.025 --> 00:05:36.017 and just delete all of that text. 127 00:05:36.017 --> 00:05:39.313 We're gonna start from scratch. 128 00:05:39.313 --> 00:05:41.072 Alright, so I have an empty file right now. 129 00:05:41.072 --> 00:05:43.294 Then I'm gonna go through and drop in some elements 130 00:05:43.294 --> 00:05:45.211 here for this JSF page. 131 00:05:49.051 --> 00:05:51.574 So I'll start off with a normal header information 132 00:05:51.574 --> 00:05:55.741 referring to the various JSF libraries that I'll use. 133 00:05:59.053 --> 00:06:01.060 And then I'll set up the head section, 134 00:06:01.060 --> 00:06:04.352 where I simply just set up the title for this JSF page, 135 00:06:04.352 --> 00:06:07.553 Student One Registration Form. 136 00:06:07.553 --> 00:06:11.209 And then I'll go ahead and put in the body of the page, 137 00:06:11.209 --> 00:06:12.876 along with the form. 138 00:06:13.713 --> 00:06:15.673 And, note again, how Eclipse will kind of 139 00:06:15.673 --> 00:06:17.659 do some of the code completion here for you, 140 00:06:17.659 --> 00:06:19.076 for the end tags. 141 00:06:21.110 --> 00:06:23.443 So at this point I have a very basic page, 142 00:06:23.443 --> 00:06:26.837 I have a body, and then, inside of that I have a form. 143 00:06:26.837 --> 00:06:27.670 The form's empty. 144 00:06:27.670 --> 00:06:30.905 I need to add some elements to the form. 145 00:06:30.905 --> 00:06:32.372 So let me open up the window, 146 00:06:32.372 --> 00:06:33.697 or expand the window a bit, 147 00:06:33.697 --> 00:06:36.161 so I can have some room to work in. 148 00:06:36.161 --> 00:06:37.524 Get dirty. 149 00:06:37.524 --> 00:06:39.024 Move around a bit. 150 00:06:41.465 --> 00:06:43.764 And so, what I'll do is, I'll start off with the first name. 151 00:06:43.764 --> 00:06:47.931 So, simply a first name label, along with a text box for it. 152 00:06:51.130 --> 00:06:53.163 And remember, the first name is not required, 153 00:06:53.163 --> 00:06:57.804 so we're not gonna put any special rules on it. 154 00:06:57.804 --> 00:06:59.295 And then I'll just kind of repeat 155 00:06:59.295 --> 00:07:01.962 this process here for last name. 156 00:07:03.181 --> 00:07:06.084 So I'll just drop in some code for last name. 157 00:07:06.084 --> 00:07:08.271 Now for last name, things are a little bit different. 158 00:07:08.271 --> 00:07:10.353 So let's kind of walk through this a bit. 159 00:07:10.353 --> 00:07:12.520 So on lines 20 through 22, 160 00:07:15.387 --> 00:07:18.078 so the one new item here is that required equals true. 161 00:07:18.078 --> 00:07:20.268 And we saw that in the previous slide presentation. 162 00:07:20.268 --> 00:07:22.619 But here, the last name is required, 163 00:07:22.619 --> 00:07:25.335 so required equals true. 164 00:07:25.335 --> 00:07:26.823 JSF will read that attribute, 165 00:07:26.823 --> 00:07:28.829 and it'll perform validation on it 166 00:07:28.829 --> 00:07:31.162 when this form is processed. 167 00:07:32.015 --> 00:07:33.536 And I also want to just repeat this for email. 168 00:07:33.536 --> 00:07:36.007 So email is also gonna have its field 169 00:07:36.007 --> 00:07:39.811 being set for required equals true for email. 170 00:07:39.811 --> 00:07:40.906 So again, just kind of stepping back, 171 00:07:40.906 --> 00:07:43.343 the last name and the email address 172 00:07:43.343 --> 00:07:45.510 on this form are required. 173 00:07:48.966 --> 00:07:50.313 And then, finally, I'll just wrap up 174 00:07:50.313 --> 00:07:52.214 with our command button. 175 00:07:52.214 --> 00:07:54.518 So our command button, label of Submit. 176 00:07:54.518 --> 00:07:56.810 And then the action, we're gonna make use of 177 00:07:56.810 --> 00:07:58.609 this student one response. 178 00:07:58.609 --> 00:08:00.465 So, remember, like in the previous videos, 179 00:08:00.465 --> 00:08:02.334 we'll have to create a page 180 00:08:02.334 --> 00:08:05.525 called student_one_response.xhtml. 181 00:08:05.525 --> 00:08:08.025 But we'll get to that shortly. 182 00:08:12.329 --> 00:08:13.577 Alright, so this all looks really good. 183 00:08:13.577 --> 00:08:15.140 So we have our basic form set up, 184 00:08:15.140 --> 00:08:16.716 and it's ready to go. 185 00:08:16.716 --> 00:08:18.133 So now let's go ahead and take care of 186 00:08:18.133 --> 00:08:19.844 some of our other work. 187 00:08:19.844 --> 00:08:21.088 And there's one more thing we have to do. 188 00:08:21.088 --> 00:08:23.915 We need to set up the displaying of the error messages. 189 00:08:23.915 --> 00:08:27.233 So, here I need to make use of the h:messages. 190 00:08:27.233 --> 00:08:30.162 So this will, again, check for any error messages. 191 00:08:30.162 --> 00:08:31.894 If it finds some, it'll display 192 00:08:31.894 --> 00:08:34.993 a bullet list of all those error messages. 193 00:08:34.993 --> 00:08:38.414 And also, I'm referring to this style class called "error." 194 00:08:38.414 --> 00:08:40.776 I haven't defined it yet in this file. 195 00:08:40.776 --> 00:08:42.284 So let's go ahead and move up top 196 00:08:42.284 --> 00:08:45.284 and define it in the header section. 197 00:08:47.669 --> 00:08:49.001 So moving into the header section, 198 00:08:49.001 --> 00:08:51.623 I'm simply gonna define a style. 199 00:08:51.623 --> 00:08:54.790 And the style class is called "error." 200 00:08:57.678 --> 00:09:01.845 And here we're simply setting the font color to be red. 201 00:09:03.267 --> 00:09:05.821 So that's how we will get all of our error messages in red. 202 00:09:05.821 --> 00:09:08.438 And again, you could make use of your own styles here, 203 00:09:08.438 --> 00:09:10.688 or you could import a given style sheet, 204 00:09:10.688 --> 00:09:12.140 but here I'm just keeping it simple 205 00:09:12.140 --> 00:09:14.807 right now for our basic example. 206 00:09:18.799 --> 00:09:20.170 Now the next thing we need to do is 207 00:09:20.170 --> 00:09:23.753 we need to actually create our managed bean 208 00:09:24.934 --> 00:09:26.767 to actually hold our form data, right? 209 00:09:26.767 --> 00:09:29.486 So, moving back over here into the window, 210 00:09:29.486 --> 00:09:33.034 I go to source, actually I need to create a package, 211 00:09:33.034 --> 00:09:35.801 so I'm gonna go right-click, New. 212 00:09:35.801 --> 00:09:37.703 And I'll choose Package. 213 00:09:37.703 --> 00:09:38.895 Cause I wanna put the managed bean 214 00:09:38.895 --> 00:09:41.953 into a luv2code package here. 215 00:09:41.953 --> 00:09:43.681 So, for the actual name of the package, 216 00:09:43.681 --> 00:09:47.014 I'll call com.luv2code.jsf.validatedemo. 217 00:09:49.333 --> 00:09:51.443 And that's the actual name of my package 218 00:09:51.443 --> 00:09:54.452 that I will use for my managed bean. 219 00:09:54.452 --> 00:09:55.632 And once you're happy with that, 220 00:09:55.632 --> 00:09:57.088 you can go ahead and click Finish. 221 00:09:57.088 --> 00:09:58.567 It'll create the package. 222 00:09:58.567 --> 00:10:01.981 That's kind of what it looks like here on the screen. 223 00:10:01.981 --> 00:10:04.835 Now, this is where I will place my managed bean. 224 00:10:04.835 --> 00:10:07.733 So, on the package, I'll just right-click, 225 00:10:07.733 --> 00:10:09.400 I'll say New, Class. 226 00:10:10.787 --> 00:10:12.846 The actual name of the class 227 00:10:12.846 --> 00:10:14.975 I'm gonna use is called StudentOne. 228 00:10:14.975 --> 00:10:16.318 So StudentOne. 229 00:10:16.318 --> 00:10:19.063 I'll keep all the other defaults here in this example. 230 00:10:19.063 --> 00:10:20.810 And once I'm happy with this, 231 00:10:20.810 --> 00:10:22.881 then I'll go ahead and click the Finish button 232 00:10:22.881 --> 00:10:24.548 in the bottom right. 233 00:10:26.432 --> 00:10:28.272 Okay great, so we have this 234 00:10:28.272 --> 00:10:30.360 very basic class here called StudentOne. 235 00:10:30.360 --> 00:10:33.168 You can just expand the window. 236 00:10:33.168 --> 00:10:34.389 This is gonna be our managed bean, 237 00:10:34.389 --> 00:10:36.613 so I give the managed bean annotation. 238 00:10:36.613 --> 00:10:37.943 And again, we've done all this before 239 00:10:37.943 --> 00:10:39.415 in the previous videos. 240 00:10:39.415 --> 00:10:41.858 Just make sure I do a proper import here 241 00:10:41.858 --> 00:10:44.775 for javax.faces.bean, managed bean. 242 00:10:46.863 --> 00:10:50.426 I'll choose the first option here. 243 00:10:50.426 --> 00:10:52.324 Alright, so great, so the import's taken care of. 244 00:10:52.324 --> 00:10:54.114 Now we're gonna define our fields. 245 00:10:54.114 --> 00:10:55.306 We're gonna have three fields here. 246 00:10:55.306 --> 00:10:57.447 The first field is gonna be for first name. 247 00:10:57.447 --> 00:10:59.795 Then we'll have last name. 248 00:10:59.795 --> 00:11:02.060 And then we'll have email. 249 00:11:02.060 --> 00:11:04.355 So those are our fields that we're gonna to use 250 00:11:04.355 --> 00:11:06.105 to capture form data. 251 00:11:09.898 --> 00:11:10.920 Now what we need to do 252 00:11:10.920 --> 00:11:13.125 is create our no argument constructor. 253 00:11:13.125 --> 00:11:15.254 So again, we create the constructor. 254 00:11:15.254 --> 00:11:16.653 It has the same name as the class, 255 00:11:16.653 --> 00:11:18.403 so public StudentOne. 256 00:11:19.538 --> 00:11:21.955 It just does nothing for now. 257 00:11:25.019 --> 00:11:29.519 So give me some time to give us some working room here. 258 00:11:29.519 --> 00:11:30.562 And the next thing we want to do 259 00:11:30.562 --> 00:11:33.895 is create our getter and setter methods. 260 00:11:37.742 --> 00:11:40.065 And again, just like the previous videos, 261 00:11:40.065 --> 00:11:41.962 we're gonna make use of that Eclipse trick, 262 00:11:41.962 --> 00:11:44.424 the just right-click, choose Source, 263 00:11:44.424 --> 00:11:48.174 and then select Generate Getters and Setters. 264 00:11:50.929 --> 00:11:53.218 And Eclipse will bring up the dialog. 265 00:11:53.218 --> 00:11:54.498 I'll go through and I'll select 266 00:11:54.498 --> 00:11:58.521 all of those items here, email, first name, and last name. 267 00:11:58.521 --> 00:12:00.729 Keep all the other defaults. 268 00:12:00.729 --> 00:12:02.312 And then select OK. 269 00:12:06.136 --> 00:12:07.896 Alright great, so Eclipse did a lot of work here. 270 00:12:07.896 --> 00:12:10.411 Let me just move around here 271 00:12:10.411 --> 00:12:13.741 and just take a look at everything that was completed. 272 00:12:13.741 --> 00:12:15.768 So here Eclipse went through and created 273 00:12:15.768 --> 00:12:19.018 the getters and setters for first name. 274 00:12:20.528 --> 00:12:23.602 It did a similar thing here for last name. 275 00:12:23.602 --> 00:12:25.582 And finally for email. 276 00:12:25.582 --> 00:12:27.116 So again, the basic things that 277 00:12:27.116 --> 00:12:29.783 we need to do for our JSF beans. 278 00:12:33.625 --> 00:12:34.890 So we have our managed bean created, 279 00:12:34.890 --> 00:12:36.342 we have our no argument constructor created, 280 00:12:36.342 --> 00:12:39.726 and we also have our getter and setter methods in place. 281 00:12:39.726 --> 00:12:41.181 So this bean's ready to go. 282 00:12:41.181 --> 00:12:42.014 Good job. 283 00:12:44.841 --> 00:12:46.502 Alright, and the next thing we need to do here 284 00:12:46.502 --> 00:12:50.008 is create the confirmation page, or the response page. 285 00:12:50.008 --> 00:12:52.190 So I'll just do a right-click. 286 00:12:52.190 --> 00:12:54.190 I'll say New, HTML File. 287 00:12:58.808 --> 00:13:01.047 The name of this file is gonna be called 288 00:13:01.047 --> 00:13:03.297 student_one_response.xhtml. 289 00:13:11.390 --> 00:13:12.260 And once you have that entered, 290 00:13:12.260 --> 00:13:13.907 you can go ahead and click the Finish button 291 00:13:13.907 --> 00:13:15.701 in the bottom right. 292 00:13:15.701 --> 00:13:17.842 Again, they give you a lot of template stuff. 293 00:13:17.842 --> 00:13:19.299 Go ahead and select all of it 294 00:13:19.299 --> 00:13:20.932 and hit the delete key on your keyboard. 295 00:13:20.932 --> 00:13:22.599 Just to wipe it out. 296 00:13:23.448 --> 00:13:25.349 And what I'll do is I'll actually go through 297 00:13:25.349 --> 00:13:29.016 and drop in some code that I had previously. 298 00:13:31.262 --> 00:13:32.095 And the confirmation page is 299 00:13:32.095 --> 00:13:33.608 not that much of a big deal because 300 00:13:33.608 --> 00:13:37.358 we're not doing anything really special here. 301 00:13:38.825 --> 00:13:40.992 Just use the body section. 302 00:13:42.924 --> 00:13:44.204 On line 12, we simply display 303 00:13:44.204 --> 00:13:47.386 the student's first name and last name. 304 00:13:47.386 --> 00:13:49.459 And then we display the email. 305 00:13:49.459 --> 00:13:50.957 And again, I'm using the managed bean 306 00:13:50.957 --> 00:13:53.515 and the JSF expression language for that. 307 00:13:53.515 --> 00:13:54.348 That's pretty much it. 308 00:13:54.348 --> 00:13:57.015 So that's our confirmation page. 309 00:13:59.816 --> 00:14:02.293 So now we can simply run the application, 310 00:14:02.293 --> 00:14:03.622 and test it out. 311 00:14:03.622 --> 00:14:05.436 So, for our form here, 312 00:14:05.436 --> 00:14:07.640 first name, last name, email, 313 00:14:07.640 --> 00:14:09.423 I'll just hit Submit. 314 00:14:09.423 --> 00:14:11.156 It's gonna give me the validation errors 315 00:14:11.156 --> 00:14:15.323 because last name's required and email's required. 316 00:14:17.519 --> 00:14:19.883 I'll go through and I'll enter 317 00:14:19.883 --> 00:14:21.234 some data here for first name. 318 00:14:21.234 --> 00:14:23.977 John Doe, I'll try and see if I can sneak by. 319 00:14:23.977 --> 00:14:25.208 Hit Submit. 320 00:14:25.208 --> 00:14:26.749 But it's still catching me on emails. 321 00:14:26.749 --> 00:14:27.945 That value's required, 322 00:14:27.945 --> 00:14:29.174 so I still need to give 323 00:14:29.174 --> 00:14:32.341 an actual email address for this form. 324 00:14:36.279 --> 00:14:40.112 So here I'll just enter john.doe@luv2code.com. 325 00:14:42.912 --> 00:14:44.829 And then we hit Submit. 326 00:14:48.508 --> 00:14:49.784 And everything works out as desired, right? 327 00:14:49.784 --> 00:14:52.990 So now, we have John Doe and his email address 328 00:14:52.990 --> 00:14:54.785 is john.doe@luv2code.com. 329 00:14:54.785 --> 00:14:57.138 So, we entered the required fields 330 00:14:57.138 --> 00:14:59.389 for last name and email address. 331 00:14:59.389 --> 00:15:00.222 Good job. 332 00:15:00.222 --> 00:15:01.413 This looks really good. 333 00:15:01.413 --> 00:15:05.168 Alright, so let's go ahead and summarize this video. 334 00:15:05.168 --> 00:15:08.069 We started off with our application demo. 335 00:15:08.069 --> 00:15:10.826 Then we learned how to create the required fields. 336 00:15:10.826 --> 00:15:12.262 Next, we covered how to display 337 00:15:12.262 --> 00:15:14.118 the validation error messages. 338 00:15:14.118 --> 00:15:16.309 And then finally, we pulled it all together 339 00:15:16.309 --> 00:15:19.127 with a full JSF page example. 340 00:15:19.127 --> 00:15:20.142 So great job. 341 00:15:20.142 --> 00:15:21.399 You learned the basics here on 342 00:15:21.399 --> 00:15:25.617 handling validation rules for required fields. 343 00:15:25.617 --> 00:15:27.874 Well this wraps up the video. 344 00:15:27.874 --> 00:15:29.718 In this video, we learned how to 345 00:15:29.718 --> 00:15:33.791 validate JSF forms with required fields. 346 00:15:33.791 --> 00:15:34.624 Stay tuned. 347 00:15:34.624 --> 00:15:36.288 I have a lot more validation rules to cover 348 00:15:36.288 --> 00:15:40.455 and we'll do a deep dive on those in each separate video.