1 00:00:02,260 --> 00:00:04,330 Now we got that entered player name, 2 00:00:04,330 --> 00:00:06,210 and I'll get rid of console log, 3 00:00:06,210 --> 00:00:09,420 because I'm not getting that player named to log it, 4 00:00:09,420 --> 00:00:12,250 instead I now want to validate it, 5 00:00:12,250 --> 00:00:15,450 I wanna check if something valid was entered, 6 00:00:15,450 --> 00:00:17,370 and if that was the case, 7 00:00:17,370 --> 00:00:20,630 then, I wanna set it as a player name here 8 00:00:20,630 --> 00:00:23,110 for the first or the second player. 9 00:00:23,110 --> 00:00:25,249 And for this we'll also need to find out 10 00:00:25,249 --> 00:00:29,560 whether we're editing the first or second player, 11 00:00:29,560 --> 00:00:30,950 but that will be the next step. 12 00:00:30,950 --> 00:00:34,350 First of all, let's validate the input. 13 00:00:34,350 --> 00:00:37,090 And for this here, when I get the player names, 14 00:00:37,090 --> 00:00:39,540 so when I get the value that was entered, 15 00:00:39,540 --> 00:00:43,870 I'll call another method on that string that we get back. 16 00:00:43,870 --> 00:00:45,780 Get will give us a string here 17 00:00:45,780 --> 00:00:47,280 because there's input element 18 00:00:47,280 --> 00:00:49,440 which we're getting the value from, 19 00:00:49,440 --> 00:00:51,390 will yield as a string. 20 00:00:51,390 --> 00:00:53,380 And on that string that we get back, 21 00:00:53,380 --> 00:00:55,483 we can call the trim method. 22 00:00:56,400 --> 00:00:58,100 That is a built in method 23 00:00:58,100 --> 00:01:01,430 which is available on all strings in JavaScript, 24 00:01:01,430 --> 00:01:06,410 and what's trimmed does is it's trims excess white space. 25 00:01:06,410 --> 00:01:09,990 If you will have a string that has a couple of blanks, 26 00:01:09,990 --> 00:01:13,460 and then maybe a couple of blanks after the word itself, 27 00:01:13,460 --> 00:01:16,370 then trim we'll get rid of all that white space 28 00:01:16,370 --> 00:01:19,193 in front and after the actual content. 29 00:01:20,120 --> 00:01:22,790 Now, if your content contains a white space, 30 00:01:22,790 --> 00:01:26,040 that will be preserved, so that will not be deleted. 31 00:01:26,040 --> 00:01:28,290 It's really just about white space in front 32 00:01:28,290 --> 00:01:30,200 or after your content. 33 00:01:30,200 --> 00:01:32,290 Trim we'll get rid of it. 34 00:01:32,290 --> 00:01:35,460 And I'm doing that so that if the user entered nothing 35 00:01:35,460 --> 00:01:37,250 but a bunch of blanks, 36 00:01:37,250 --> 00:01:39,420 I actually get an empty string instead, 37 00:01:39,420 --> 00:01:42,300 because trim does not find any content 38 00:01:42,300 --> 00:01:44,653 and hence gets rid of all that white space. 39 00:01:45,610 --> 00:01:47,590 And I wanna do that because player names, 40 00:01:47,590 --> 00:01:50,600 of course, should not be just a bunch of white space 41 00:01:50,600 --> 00:01:52,930 and they should also not be white space, 42 00:01:52,930 --> 00:01:55,750 then some name and then more of white space. 43 00:01:55,750 --> 00:01:57,683 So calling trim here is good. 44 00:01:58,690 --> 00:02:02,590 This also means that we end up with an empty string 45 00:02:02,590 --> 00:02:04,960 if the user did not enter anything 46 00:02:04,960 --> 00:02:07,370 except for a bunch of blanks. 47 00:02:07,370 --> 00:02:09,160 So if I just enter a bunch of blanks 48 00:02:09,160 --> 00:02:11,110 by holding down the space key, 49 00:02:11,110 --> 00:02:13,830 then I technically have a lot of characters 50 00:02:13,830 --> 00:02:15,480 but no actual content. 51 00:02:15,480 --> 00:02:18,300 After trim, it will be an empty string. 52 00:02:18,300 --> 00:02:20,680 And therefore we can now add some validation 53 00:02:20,680 --> 00:02:24,170 and check if we maybe wanna show an error to the user 54 00:02:24,170 --> 00:02:26,743 prompting the user to enter something valid. 55 00:02:27,870 --> 00:02:32,820 Now we were able to do that with HTML attributes as well. 56 00:02:32,820 --> 00:02:35,930 On input, we can add required. 57 00:02:35,930 --> 00:02:38,280 You might remember this attribute. 58 00:02:38,280 --> 00:02:41,760 There also were a couple of other HTML attributes 59 00:02:41,760 --> 00:02:42,660 that we could add. 60 00:02:43,820 --> 00:02:46,280 The problem just is if I add required, 61 00:02:46,280 --> 00:02:48,420 then indeed I get a warning, 62 00:02:48,420 --> 00:02:51,200 if I have an empty input, 63 00:02:51,200 --> 00:02:55,370 but if I enter a bunch of blanks, then I can submit this. 64 00:02:55,370 --> 00:02:57,590 Now I don't get a warning. 65 00:02:57,590 --> 00:02:58,980 And as I just explained, 66 00:02:58,980 --> 00:03:02,060 a bunch of blanks is also not acceptable. 67 00:03:02,060 --> 00:03:03,760 So we can add required here, 68 00:03:03,760 --> 00:03:06,790 but I still wanna also add some extra validation 69 00:03:06,790 --> 00:03:10,690 with JavaScript after trimming the input 70 00:03:10,690 --> 00:03:14,003 just to double check that we have a valid value. 71 00:03:16,000 --> 00:03:17,620 Now since we get an empty string, 72 00:03:17,620 --> 00:03:21,400 if we trimmed this and we had only blanks in there, 73 00:03:21,400 --> 00:03:25,640 we can now use a if check to run some code conditionally, 74 00:03:25,640 --> 00:03:29,163 and check if not entered player name. 75 00:03:30,130 --> 00:03:32,220 Now what am I doing here? 76 00:03:32,220 --> 00:03:33,740 We learned about this concept 77 00:03:33,740 --> 00:03:36,203 of something being truthy or falsy, 78 00:03:37,150 --> 00:03:39,530 I could check if entered player name 79 00:03:39,530 --> 00:03:41,980 is equal to an empty string 80 00:03:41,980 --> 00:03:44,130 and then execute some code if that's the case. 81 00:03:44,130 --> 00:03:45,653 That would be totally fine. 82 00:03:46,600 --> 00:03:48,980 But we can write this in a shorter way 83 00:03:48,980 --> 00:03:52,090 by just writing if not entered player name. 84 00:03:52,090 --> 00:03:54,510 Because an empty string is considered 85 00:03:54,510 --> 00:03:58,050 a falsy value in JavaScript. 86 00:03:58,050 --> 00:04:00,030 Which means it yields false 87 00:04:00,030 --> 00:04:04,070 if you was in a place where a Boolean is expected, 88 00:04:04,070 --> 00:04:05,920 which is the case for a if statement. 89 00:04:07,220 --> 00:04:09,670 So here this entered player name, 90 00:04:09,670 --> 00:04:12,170 will be treated as false. 91 00:04:12,170 --> 00:04:14,620 And hence here I can check if entered player name 92 00:04:14,620 --> 00:04:16,670 is not true, so if it is false, 93 00:04:16,670 --> 00:04:19,260 if this was an empty string and then execute some code 94 00:04:19,260 --> 00:04:20,480 if that's the case. 95 00:04:20,480 --> 00:04:23,140 That's why the exclamation mark is important. 96 00:04:23,140 --> 00:04:25,810 If I check for just if entered player name, 97 00:04:25,810 --> 00:04:28,240 then I go in there, if it's truthy. 98 00:04:28,240 --> 00:04:30,950 So if it's anything but an empty string. 99 00:04:30,950 --> 00:04:32,640 And of course, I don't wanna show a warning 100 00:04:32,640 --> 00:04:33,530 if that's the case, 101 00:04:33,530 --> 00:04:37,430 but only if it's not true, if it's falsy. 102 00:04:37,430 --> 00:04:40,050 So that's why I have not entered player name, 103 00:04:40,050 --> 00:04:42,050 in case that's too confusing as mentioned, 104 00:04:42,050 --> 00:04:47,030 you could also just check if that is maybe empty like that. 105 00:04:47,030 --> 00:04:48,483 This would also be fine. 106 00:04:49,400 --> 00:04:52,040 You can also use just two equal signs here, 107 00:04:52,040 --> 00:04:55,620 but it is a best practice to always use free equal signs 108 00:04:55,620 --> 00:04:57,380 if checking for equality 109 00:04:57,380 --> 00:05:01,100 unless you know that you are comparing different types 110 00:05:01,100 --> 00:05:03,620 of values and you really just wanna check 111 00:05:03,620 --> 00:05:05,460 for value equality 112 00:05:05,460 --> 00:05:08,820 and you don't care about type equality. 113 00:05:08,820 --> 00:05:12,220 I did talk about the difference of two and three equal signs 114 00:05:12,220 --> 00:05:13,773 in the previous sections. 115 00:05:15,490 --> 00:05:17,210 Now here we execute code 116 00:05:17,210 --> 00:05:20,200 if the entered player name is falsy. 117 00:05:20,200 --> 00:05:22,270 And what do I wanna do in here? 118 00:05:22,270 --> 00:05:26,240 I wanna show an error, an error message. 119 00:05:26,240 --> 00:05:29,420 And we could do that by executing this alert function, 120 00:05:29,420 --> 00:05:31,430 which we used before in this course. 121 00:05:31,430 --> 00:05:35,180 But I wanna show it on the page, here in that overlay, 122 00:05:35,180 --> 00:05:37,700 maybe below the input field. 123 00:05:37,700 --> 00:05:41,700 And therefore if we need to add an extra HTML element there 124 00:05:41,700 --> 00:05:44,170 to which we can get access in JavaScript 125 00:05:44,170 --> 00:05:47,180 where we can inject our error message 126 00:05:47,180 --> 00:05:48,943 that we might wanna display. 127 00:05:49,920 --> 00:05:51,950 And for this in index HTML, 128 00:05:51,950 --> 00:05:56,950 I'll actually add a new HTML element inside of my form here. 129 00:05:57,140 --> 00:06:00,890 Here between that div with my foreign control 130 00:06:00,890 --> 00:06:03,170 and my div that holds my buttons, 131 00:06:03,170 --> 00:06:06,450 I'll add a paragraph which is empty initially, 132 00:06:06,450 --> 00:06:10,903 but where I will add an ID of config-errors. 133 00:06:13,060 --> 00:06:14,420 If I saved that, 134 00:06:14,420 --> 00:06:17,270 of course, we don't see that paragraph because it's empty. 135 00:06:17,270 --> 00:06:20,330 We see just some empty space that was added because of it 136 00:06:20,330 --> 00:06:22,023 but that doesn't hurt us here. 137 00:06:23,530 --> 00:06:26,040 Now we can get access to that paragraph 138 00:06:26,040 --> 00:06:28,650 by using that ID in app JS, 139 00:06:28,650 --> 00:06:31,560 because that is to place where I'm gathering 140 00:06:31,560 --> 00:06:33,650 all these elements. 141 00:06:33,650 --> 00:06:37,360 And here, let's say here after getting access to the form, 142 00:06:37,360 --> 00:06:41,360 I will get access to my errors output element 143 00:06:42,630 --> 00:06:45,010 by using document get element by ID 144 00:06:45,010 --> 00:06:47,793 and passing that ID that we just added to it. 145 00:06:49,700 --> 00:06:51,220 Now we can use this element 146 00:06:51,220 --> 00:06:55,163 to show some error message on the screen from config JS. 147 00:06:56,380 --> 00:06:57,850 So here in this if block, 148 00:06:57,850 --> 00:07:01,370 we can now use this brand new errors output element 149 00:07:01,370 --> 00:07:02,490 that we just added 150 00:07:03,350 --> 00:07:06,400 and set the text content equal to, 151 00:07:06,400 --> 00:07:10,510 please enter a valid name. 152 00:07:10,510 --> 00:07:13,403 Of course you can use any texts you want here. 153 00:07:15,530 --> 00:07:18,120 I also then wanna do something important, 154 00:07:18,120 --> 00:07:20,850 I wanna return thereafter. 155 00:07:20,850 --> 00:07:22,980 Now we do return in functions 156 00:07:22,980 --> 00:07:26,060 if we wanna pass a value to the place 157 00:07:26,060 --> 00:07:28,103 where the function was executed. 158 00:07:29,100 --> 00:07:31,170 But that's not what I wanna do here. 159 00:07:31,170 --> 00:07:33,040 I'm not returning any value, 160 00:07:33,040 --> 00:07:34,990 I'm just executing return like this 161 00:07:34,990 --> 00:07:37,930 without passing a value thereafter. 162 00:07:37,930 --> 00:07:40,680 Because return also has another function. 163 00:07:40,680 --> 00:07:42,760 When you execute return, 164 00:07:42,760 --> 00:07:45,490 you stop the execution of the function 165 00:07:45,490 --> 00:07:47,110 in which you call it. 166 00:07:47,110 --> 00:07:50,470 So lines there after which we will see when add, 167 00:07:50,470 --> 00:07:55,040 will not be executed if return was executed. 168 00:07:55,040 --> 00:07:57,300 And that's what I wanna achieve here. 169 00:07:57,300 --> 00:07:59,660 If the user entered something invalid 170 00:07:59,660 --> 00:08:03,610 and I'm showing this warning or this error to the user, 171 00:08:03,610 --> 00:08:05,630 then I don't wanna execute any other code 172 00:08:05,630 --> 00:08:07,183 in this function. 173 00:08:08,070 --> 00:08:11,280 Because whilst at the moment we have no other code here, 174 00:08:11,280 --> 00:08:13,200 we will soon write some code 175 00:08:13,200 --> 00:08:17,600 that handles all that user input in case it was valid. 176 00:08:17,600 --> 00:08:19,000 Since that's not the case here, 177 00:08:19,000 --> 00:08:21,530 I don't wanna execute the code which will soon add, 178 00:08:21,530 --> 00:08:22,600 and hence instead, 179 00:08:22,600 --> 00:08:23,840 with helpful for return, 180 00:08:23,840 --> 00:08:27,560 we'll stop the function execution after this line of code, 181 00:08:27,560 --> 00:08:30,540 but only if we make it into the is if block. 182 00:08:30,540 --> 00:08:33,933 So only if the user input is not valid. 183 00:08:35,059 --> 00:08:38,030 And then with that, if you save all your code, 184 00:08:38,030 --> 00:08:42,460 if you try to submit just a bunch of blanks here, 185 00:08:42,460 --> 00:08:46,223 you get this please enter a valid name error message. 186 00:08:47,420 --> 00:08:49,890 And that's not even all I wanna do here. 187 00:08:49,890 --> 00:08:53,530 Instead, I also wanna add some styling 188 00:08:53,530 --> 00:08:57,410 so that this is highlighted that we have an error here. 189 00:08:57,410 --> 00:09:01,870 For this I wanna add an extra CSS class, to this div here, 190 00:09:01,870 --> 00:09:04,070 to this form control div, 191 00:09:04,070 --> 00:09:07,550 a extra CSS class that will then change 192 00:09:07,550 --> 00:09:09,600 the look of the label and the input field 193 00:09:09,600 --> 00:09:12,743 and we'll have to add that the styles for this as well. 194 00:09:14,210 --> 00:09:17,590 Extra CSS class which we could name error. 195 00:09:17,590 --> 00:09:18,430 And for this of course, 196 00:09:18,430 --> 00:09:21,340 we need to get access to this div in this form. 197 00:09:21,340 --> 00:09:23,370 Now how can we get access? 198 00:09:23,370 --> 00:09:25,580 There are different ways. 199 00:09:25,580 --> 00:09:27,490 I don't wanna use query selector 200 00:09:27,490 --> 00:09:30,180 because we have multiple div's on this page. 201 00:09:30,180 --> 00:09:32,760 And query selector would select the first one, 202 00:09:32,760 --> 00:09:35,653 which would be the backdrop, that's not the correct one. 203 00:09:36,970 --> 00:09:40,500 We could select by class, but even there, 204 00:09:40,500 --> 00:09:43,010 we could have multiple form controls and that's different, 205 00:09:43,010 --> 00:09:45,593 not necessarily a safe way of doing it. 206 00:09:46,750 --> 00:09:49,620 Of course we could add an ID here and select by ID, 207 00:09:49,620 --> 00:09:51,060 and that's always useful, 208 00:09:51,060 --> 00:09:54,150 but here I don't wanna do that either. 209 00:09:54,150 --> 00:09:56,600 Instead, I know that in this case, 210 00:09:56,600 --> 00:09:59,630 I only have one form control div in that form. 211 00:09:59,630 --> 00:10:03,300 And hence I wanna practice a little bit of traversing, 212 00:10:03,300 --> 00:10:05,260 a little bit of DOM traversal, 213 00:10:05,260 --> 00:10:09,850 and actually dive into the first child of my form here, 214 00:10:09,850 --> 00:10:12,983 since that is the div I wanna add my CSS class to. 215 00:10:14,240 --> 00:10:15,630 So in conflict JS, 216 00:10:15,630 --> 00:10:20,160 we know that the form element is stored in event target 217 00:10:20,160 --> 00:10:22,610 because the form is what's submitted. 218 00:10:22,610 --> 00:10:25,430 So event target is the form element. 219 00:10:25,430 --> 00:10:27,210 And I then know that the div 220 00:10:27,210 --> 00:10:29,120 to which I wanna add my CSS class, 221 00:10:29,120 --> 00:10:31,473 is the first element in that form. 222 00:10:32,430 --> 00:10:36,730 So what I can do here is I can access event target 223 00:10:36,730 --> 00:10:41,580 and then first element child to traverse the DOM 224 00:10:41,580 --> 00:10:45,830 to dive into that form and select the first element 225 00:10:45,830 --> 00:10:47,290 that's found in there. 226 00:10:47,290 --> 00:10:51,410 So the first HTML element child that's found in there, 227 00:10:51,410 --> 00:10:53,410 and that will be the div. 228 00:10:53,410 --> 00:10:56,140 And on this first element child element, 229 00:10:56,140 --> 00:10:59,673 I wanna add my class, my CSS class. 230 00:11:00,790 --> 00:11:04,620 Now we learned before that adding and removing CSS classes 231 00:11:04,620 --> 00:11:09,400 is easily done with help of the class list property, 232 00:11:09,400 --> 00:11:12,130 which exists on all HTML elements, 233 00:11:12,130 --> 00:11:14,400 which you use in JavaScript. 234 00:11:14,400 --> 00:11:15,850 And on class list, 235 00:11:15,850 --> 00:11:19,713 you have methods like add to add a CSS class. 236 00:11:20,870 --> 00:11:25,403 Alternatively, we could set class name equal to the class 237 00:11:25,403 --> 00:11:27,390 that we wanna add to the element, 238 00:11:27,390 --> 00:11:30,500 but this will overwrite any classes 239 00:11:30,500 --> 00:11:33,450 that might already be on that element. 240 00:11:33,450 --> 00:11:34,500 And in this case, 241 00:11:34,500 --> 00:11:38,730 I already have the form control class on that div, 242 00:11:38,730 --> 00:11:40,700 and I don't wanna override that, 243 00:11:40,700 --> 00:11:44,673 instead I just wanna add the brand new error class to it. 244 00:11:45,850 --> 00:11:48,560 Hence, class list add, 245 00:11:48,560 --> 00:11:51,410 is the better way of adding a CSS class here, 246 00:11:51,410 --> 00:11:54,603 and let's say it's the error class which we wanna add. 247 00:11:57,150 --> 00:11:59,570 With that if we save all of this, 248 00:11:59,570 --> 00:12:03,580 if I actually opened the div tools here, 249 00:12:03,580 --> 00:12:07,693 click on add it and then inspect my div here, 250 00:12:09,460 --> 00:12:10,890 here it is this div, 251 00:12:10,890 --> 00:12:13,980 if I enter a bunch of blanks and click confirm, 252 00:12:13,980 --> 00:12:16,270 watch this div here on the right, 253 00:12:16,270 --> 00:12:18,203 you see error was added. 254 00:12:19,070 --> 00:12:21,060 At the moment it never disappears, 255 00:12:21,060 --> 00:12:23,550 and it also doesn't change anything visually 256 00:12:23,550 --> 00:12:26,500 since we haven't added any CSS styles for it, 257 00:12:26,500 --> 00:12:28,490 but it's there. 258 00:12:28,490 --> 00:12:32,220 And now we can use this class to add some extra styling. 259 00:12:32,220 --> 00:12:36,870 But for this I'll go back to configuration CSS here 260 00:12:36,870 --> 00:12:40,420 and add some extra errors style that should show up 261 00:12:40,420 --> 00:12:42,083 if things go wrong. 262 00:12:43,890 --> 00:12:48,890 For this let's say here after form control input, 263 00:12:49,930 --> 00:12:51,890 I'll select error. 264 00:12:51,890 --> 00:12:53,720 So this CSS class which we add, 265 00:12:53,720 --> 00:12:55,550 and select any input elements 266 00:12:55,550 --> 00:12:57,690 that we find inside of a container 267 00:12:57,690 --> 00:12:59,583 that has the error class. 268 00:13:00,540 --> 00:13:04,510 Because it will be that div that has the error class, 269 00:13:04,510 --> 00:13:05,920 and I wanna select the input 270 00:13:05,920 --> 00:13:07,773 that's inside of that container. 271 00:13:08,800 --> 00:13:13,490 Hence I'm using this kind of CSS selector to select an input 272 00:13:13,490 --> 00:13:17,000 inside of a container with the error class. 273 00:13:17,000 --> 00:13:20,547 And then I'll set the border color to RGB136, 274 00:13:23,590 --> 00:13:26,890 2, 2, which is a red color. 275 00:13:26,890 --> 00:13:30,193 And I'll set the text color to the same red. 276 00:13:31,623 --> 00:13:35,040 And I'll give it a background color of RGB, 277 00:13:35,040 --> 00:13:39,600 two, five, three, two, one, nine, two, one, nine, 278 00:13:39,600 --> 00:13:41,563 which is a light red color. 279 00:13:43,420 --> 00:13:47,147 I'll also target the label like this, 280 00:13:50,910 --> 00:13:54,823 and give this a color of, well, the same red basically. 281 00:13:58,240 --> 00:13:59,980 With that, if I saved this, 282 00:13:59,980 --> 00:14:02,300 now this is highlighted and it's a bit easier 283 00:14:02,300 --> 00:14:04,970 to see that it's this input which is wrong, 284 00:14:04,970 --> 00:14:08,050 of course, a bit redundant since it's the only input here, 285 00:14:08,050 --> 00:14:11,320 but a good practice of how we can select elements 286 00:14:11,320 --> 00:14:13,260 with DOM traversal. 287 00:14:13,260 --> 00:14:15,670 So by diving into child elements 288 00:14:15,670 --> 00:14:19,370 and how we can add classes conditionally. 289 00:14:19,370 --> 00:14:21,770 And that's a huge step forward. 290 00:14:21,770 --> 00:14:24,860 Now, I just wanna make sure that if I close this 291 00:14:24,860 --> 00:14:26,520 and I then start editing again, 292 00:14:26,520 --> 00:14:31,520 I reset that status and I get rid of that error class. 293 00:14:31,730 --> 00:14:35,360 And that's also something we can do with JavaScript here 294 00:14:35,360 --> 00:14:37,760 in the close player config function, 295 00:14:37,760 --> 00:14:40,573 which executes when we do close this overlay. 296 00:14:41,480 --> 00:14:42,490 In there in the end, 297 00:14:42,490 --> 00:14:44,710 I wanna reset what's entered in the form 298 00:14:44,710 --> 00:14:47,193 and I wanna get rid of that error class. 299 00:14:48,070 --> 00:14:50,140 Now to get rid of that error class, 300 00:14:50,140 --> 00:14:55,140 we can use that form element, which has defined an app JS, 301 00:14:55,300 --> 00:14:57,763 which points at our form, 302 00:15:00,170 --> 00:15:03,760 and here we can then again, select the first element child, 303 00:15:03,760 --> 00:15:06,050 which is that div, 304 00:15:06,050 --> 00:15:10,780 and use the class list to remove the error class 305 00:15:10,780 --> 00:15:12,760 if it should exist there. 306 00:15:12,760 --> 00:15:15,850 And if it doesn't exist there, remove bold crash, 307 00:15:15,850 --> 00:15:18,010 it just won't do anything in that case, 308 00:15:18,010 --> 00:15:19,503 which is fine as well. 309 00:15:20,730 --> 00:15:23,330 I also wanna clear the input, 310 00:15:23,330 --> 00:15:27,840 and for that, we could change the input, the button here, 311 00:15:27,840 --> 00:15:32,840 button type, to reset instead of button. 312 00:15:34,080 --> 00:15:38,360 If I do that, reload, enter a bunch of blanks, 313 00:15:38,360 --> 00:15:42,000 click confirm and click cancel, we still close, 314 00:15:42,000 --> 00:15:43,900 and this is now a reset. 315 00:15:43,900 --> 00:15:46,700 We don't have the blanks in there anymore. 316 00:15:46,700 --> 00:15:50,570 Alternatively, we could also do it with JavaScript, 317 00:15:50,570 --> 00:15:54,010 but I think using reset as a type here, is simply easier, 318 00:15:54,010 --> 00:15:55,223 so I'll stick to that. 319 00:15:57,200 --> 00:16:00,120 And with that, we can now enter something there. 320 00:16:00,120 --> 00:16:03,460 But if I close this with cancel and I reopen it, 321 00:16:03,460 --> 00:16:05,720 that's not there anymore. 322 00:16:05,720 --> 00:16:08,730 And if we had errors and I cancel and reopen 323 00:16:08,730 --> 00:16:10,963 either of the two, it's also gone. 324 00:16:12,140 --> 00:16:15,930 And that's there for a good except for this error message, 325 00:16:15,930 --> 00:16:18,410 which is of course still showing up. 326 00:16:18,410 --> 00:16:21,070 We wanna get rid of that as well. 327 00:16:21,070 --> 00:16:23,360 So when we close the player config, 328 00:16:23,360 --> 00:16:26,430 besides getting rid of that error class, 329 00:16:26,430 --> 00:16:29,150 we also should get rid of that error message, 330 00:16:29,150 --> 00:16:32,720 and we can use this errors output element for that, 331 00:16:32,720 --> 00:16:34,560 which we also used for setting 332 00:16:34,560 --> 00:16:37,130 the message in the first place. 333 00:16:37,130 --> 00:16:39,540 Here, I simply wanna set the text content 334 00:16:39,540 --> 00:16:40,713 to an empty string. 335 00:16:42,670 --> 00:16:44,670 And this will now clear the message, 336 00:16:44,670 --> 00:16:46,870 the error message as well. 337 00:16:46,870 --> 00:16:51,470 If we save that, I added this, add a bunch of blanks, 338 00:16:51,470 --> 00:16:53,400 confirm, here's the error, 339 00:16:53,400 --> 00:16:56,383 if I cancel this and reopen, both is gone. 340 00:16:57,490 --> 00:16:59,030 And therefore that's working, 341 00:16:59,030 --> 00:17:03,150 now let's make sure we also gather the entered username. 342 00:17:03,150 --> 00:17:05,520 So we really do something useful with it, 343 00:17:05,520 --> 00:17:08,113 and we then set the edited player here.