WEBVTT 1 00:00:01.316 --> 00:00:02.773 Hey, welcome back. 2 00:00:02.773 --> 00:00:04.390 So in this video we're gonna talk 3 00:00:04.390 --> 00:00:06.473 about required fields again 4 00:00:06.473 --> 00:00:07.596 but I'm gonna show you how you can 5 00:00:07.596 --> 00:00:09.137 perform some customizations 6 00:00:09.137 --> 00:00:12.804 on the actual required field error messages. 7 00:00:14.109 --> 00:00:15.733 One thing that you may have noticed is that 8 00:00:15.733 --> 00:00:18.429 in the previous examples all of the error messages 9 00:00:18.429 --> 00:00:20.639 showed up at the top of form. 10 00:00:20.639 --> 00:00:23.018 What we'd like to do is modify that 11 00:00:23.018 --> 00:00:24.875 such that the error message shows up 12 00:00:24.875 --> 00:00:27.416 just next to the form. 13 00:00:27.416 --> 00:00:31.001 So what we can do is remove the h:messages 14 00:00:31.001 --> 00:00:35.674 and then add in h:message for a given field ID. 15 00:00:35.674 --> 00:00:37.366 And I'll actually show you how to do that 16 00:00:37.366 --> 00:00:38.533 in this video. 17 00:00:41.288 --> 00:00:43.792 Alright so let's go ahead and swing into Eclipse 18 00:00:43.792 --> 00:00:45.925 and let's go ahead and take a look at our form again. 19 00:00:45.925 --> 00:00:48.175 Our student_one_form.xhtml. 20 00:00:50.579 --> 00:00:53.376 And let me expand the window here. 21 00:00:53.376 --> 00:00:54.487 So the first thing I'm gonna do is 22 00:00:54.487 --> 00:00:57.102 I'm gonna move down to line 20 23 00:00:57.102 --> 00:01:00.405 and I'm gonna remove this h:messages. 24 00:01:00.405 --> 00:01:02.337 So instead of displaying all of the messages 25 00:01:02.337 --> 00:01:03.918 at the top of the form 26 00:01:03.918 --> 00:01:08.085 I wanna remove this and display 'em on each individual item. 27 00:01:09.150 --> 00:01:11.540 So I'll start here with last name. 28 00:01:11.540 --> 00:01:15.707 So right underneath last name I will say h:message. 29 00:01:21.052 --> 00:01:24.128 And I give for= and then I give 30 00:01:24.128 --> 00:01:26.273 the actual ID of the field 31 00:01:26.273 --> 00:01:29.190 that this error message relates to. 32 00:01:30.455 --> 00:01:34.283 So here I'm gonna say this is for last name. 33 00:01:34.283 --> 00:01:35.116 Last_name. 34 00:01:36.770 --> 00:01:40.937 Now right now our last name input text doesn't have an ID 35 00:01:41.953 --> 00:01:45.369 and we need to add that information. 36 00:01:45.369 --> 00:01:48.042 So I'm gonna finish the h:message. 37 00:01:48.042 --> 00:01:50.064 I'll move up to the last name field 38 00:01:50.064 --> 00:01:53.231 and I'm gonna add an ID for last_name. 39 00:01:55.232 --> 00:01:57.023 So that's the actual ID I need to set up 40 00:01:57.023 --> 00:01:58.851 so I add a new entry here. 41 00:01:58.851 --> 00:02:01.101 So I say id=last_name. 42 00:02:01.994 --> 00:02:04.171 So these two items match up. 43 00:02:04.171 --> 00:02:07.338 So ID of last_name then we say the for 44 00:02:08.940 --> 00:02:12.357 you use the same ID of that actual field. 45 00:02:18.472 --> 00:02:20.014 So I'm gonna copy this 46 00:02:20.014 --> 00:02:23.931 and you do the same approach for email address. 47 00:02:25.342 --> 00:02:29.367 So for email I'm gonna go ahead and set up an ID. 48 00:02:29.367 --> 00:02:32.200 So the ID is email, all lowercase. 49 00:02:33.316 --> 00:02:35.316 And then on line 39, for 50 00:02:36.922 --> 00:02:39.210 instead of last name is gonna be for email. 51 00:02:39.210 --> 00:02:42.702 Again, when you give the for you give the actual ID 52 00:02:42.702 --> 00:02:45.065 of the input text that you're using. 53 00:02:45.065 --> 00:02:47.398 So these two items match up. 54 00:02:51.493 --> 00:02:52.800 Alright so this looks really good. 55 00:02:52.800 --> 00:02:56.967 So we have the message for each field individually now. 56 00:03:00.791 --> 00:03:02.510 Alright so let's test this out 57 00:03:02.510 --> 00:03:05.343 in our new form that we have here. 58 00:03:06.250 --> 00:03:08.786 So I'll just hit submit and wow this looks great! 59 00:03:08.786 --> 00:03:11.754 So instead of all the messages being at the top of the page 60 00:03:11.754 --> 00:03:13.909 they're actually over to the side. 61 00:03:13.909 --> 00:03:16.346 So last name, validation error, 62 00:03:16.346 --> 00:03:19.499 email, validation error, field is required. 63 00:03:19.499 --> 00:03:21.565 So this is great, so we can kinda customize 64 00:03:21.565 --> 00:03:25.003 the layout and placement of the actual error messages. 65 00:03:25.003 --> 00:03:26.420 So good job here. 66 00:03:31.477 --> 00:03:33.808 Now one thing I'd like to do is kinda 67 00:03:33.808 --> 00:03:35.878 customize the actual error message. 68 00:03:35.878 --> 00:03:39.203 So right now, by default, they're giving us 69 00:03:39.203 --> 00:03:42.317 the error message out of the box. 70 00:03:42.317 --> 00:03:46.659 And I wanna change that actual error message myself. 71 00:03:46.659 --> 00:03:48.722 So in the actual form I can 72 00:03:48.722 --> 00:03:52.046 drop in this entry here, requiredMessage. 73 00:03:52.046 --> 00:03:54.174 So this is the actual error message that'll show up 74 00:03:54.174 --> 00:03:57.303 if they don't give us the required field. 75 00:03:57.303 --> 00:03:59.221 So here requiredMessage and I'll say 76 00:03:59.221 --> 00:04:00.895 your last name is mandatory. 77 00:04:00.895 --> 00:04:02.366 And again I can make this up, 78 00:04:02.366 --> 00:04:05.162 I can give whatever message I'd like here. 79 00:04:05.162 --> 00:04:08.242 And then for email I'm gonna say the requiredMessage 80 00:04:08.242 --> 00:04:11.659 here I'll say, I'll change this up a bit, 81 00:04:14.217 --> 00:04:15.576 must give email. 82 00:04:15.576 --> 00:04:18.302 So again whatever you wanna specify here 83 00:04:18.302 --> 00:04:21.658 that's your actual message that you can list. 84 00:04:21.658 --> 00:04:26.327 So here I just added a new entry here for requiredMessage. 85 00:04:26.327 --> 00:04:27.974 So that's the actual required error message 86 00:04:27.974 --> 00:04:32.141 that'll show up if they don't give us the appropriate data. 87 00:04:35.961 --> 00:04:38.267 Well now let's go ahead and try this out. 88 00:04:38.267 --> 00:04:40.555 So I've made the adjustments, here's our new form, 89 00:04:40.555 --> 00:04:44.651 our revised form, I'll go ahead and hit submit. 90 00:04:44.651 --> 00:04:46.769 And great now we have our custom message 91 00:04:46.769 --> 00:04:48.712 by using that requiredMessage. 92 00:04:48.712 --> 00:04:52.879 So your last name is mandatory and your must give your email 93 00:04:53.899 --> 00:04:55.963 so (laughs) even if I have a little typo 94 00:04:55.963 --> 00:04:59.649 or I have bad english here, that message still shows up 95 00:04:59.649 --> 00:05:02.644 so that's a typo on my part but hey. 96 00:05:02.644 --> 00:05:06.002 Validation that we're getting our own custom message. 97 00:05:06.002 --> 00:05:08.432 So this is great, we can even customize the error messages 98 00:05:08.432 --> 00:05:10.606 that are displayed for the validation. 99 00:05:10.606 --> 00:05:13.156 So this is great, so you really have a lot of flexibility 100 00:05:13.156 --> 00:05:16.027 on how you wanna handle the validation here 101 00:05:16.027 --> 00:05:17.617 for required fields. 102 00:05:17.617 --> 00:05:18.570 Great job! 103 00:05:18.570 --> 00:05:19.987 You're on a roll. 104 00:05:23.807 --> 00:05:25.787 Well that was fun, I showed you some additional features 105 00:05:25.787 --> 00:05:28.026 that you can add here for validation, 106 00:05:28.026 --> 00:05:30.301 showed you how we could handle the placement 107 00:05:30.301 --> 00:05:33.567 of a single error message right next to the actual field 108 00:05:33.567 --> 00:05:35.383 and I also showed you how you can 109 00:05:35.383 --> 00:05:38.570 customize the text of the error message. 110 00:05:38.570 --> 00:05:41.278 So you have full run of how to build 111 00:05:41.278 --> 00:05:43.861 JSF forms with required fields.