1 00:00:02,270 --> 00:00:10,580 To output feedback upon our validation result, I have to go to my input component and therefore each 2 00:00:10,640 --> 00:00:16,400 input element, I in the end want to add a special class to that element 3 00:00:16,460 --> 00:00:18,080 if it is invalid. 4 00:00:18,440 --> 00:00:23,890 So my classes here have to become more dynamic. In the end, 5 00:00:23,930 --> 00:00:32,720 I will add a new constant which I'll name inputClasses which is an array which at the beginning is just 6 00:00:32,720 --> 00:00:34,630 classes.inputElement, 7 00:00:34,640 --> 00:00:43,380 I always want to attach this. Now on the individual elements here, I'll replace classes.inputElement with 8 00:00:43,590 --> 00:00:44,500 my array 9 00:00:44,640 --> 00:00:55,380 So with my input, whoops, inputClasses, this array I just created here and I'll join it with a whitespace, 10 00:00:55,800 --> 00:01:02,670 so to concatenate all my string classes into one long string where the classes are separated. Now inputClasses 11 00:01:02,670 --> 00:01:07,930 also needs to receive the invalid property 12 00:01:08,130 --> 00:01:15,800 if the input is invalid and I'll do this with a if check, that check is independent of the type of the input 13 00:01:15,810 --> 00:01:18,360 so I only need to do it once at the beginning. 14 00:01:18,360 --> 00:01:26,100 I'll check if props.invalid is set to true, if it is then I'll push a new class to my inputClasses, 15 00:01:26,260 --> 00:01:26,800 the 16 00:01:26,970 --> 00:01:29,310 invalid.css class 17 00:01:29,490 --> 00:01:31,230 and of course not like that, 18 00:01:31,440 --> 00:01:32,760 Classes.Invalid, 19 00:01:32,760 --> 00:01:35,020 I need to define that class. 20 00:01:35,040 --> 00:01:43,050 So now, this is pushed to my inputClasses which are then attached in a string way to my elements, for 21 00:01:43,050 --> 00:01:46,770 that I need to receive an invalid prop which is true or false 22 00:01:46,890 --> 00:01:54,480 and I also need to find some styling. So I'll simply go to my input element or to the css file for 23 00:01:54,480 --> 00:01:57,810 the input component and add an invalid class, 24 00:01:58,050 --> 00:02:00,930 that's the class I'm referring to here, 25 00:02:01,020 --> 00:02:04,940 the class I try to push to my array. 26 00:02:04,950 --> 00:02:07,380 Now there you can set up any style you want, 27 00:02:07,530 --> 00:02:16,380 I'll simply set up a border which is 1px solid and red maybe and a background-color of light red, 28 00:02:16,530 --> 00:02:23,600 maybe salmon, let's have a look, you can even choose a little bit of a lighter red, something like that. 29 00:02:23,620 --> 00:02:31,430 Now to see that effect, I have to go back to the contact data and there, I now need to pass that invalid 30 00:02:31,440 --> 00:02:34,510 property to the input I render, 31 00:02:34,530 --> 00:02:38,800 so here I'll add invalid and invalid is some data 32 00:02:38,800 --> 00:02:47,460 I again now have on my form element, on the form element in the config object which just as a reminder 33 00:02:47,760 --> 00:02:50,210 refers to that object here on the right 34 00:02:50,220 --> 00:02:58,650 in our state orderForm property. There we have this valid property, valid of course tracks whether the 35 00:02:58,650 --> 00:03:00,310 form is valid or not, 36 00:03:00,390 --> 00:03:08,610 I want to pass an invalid property, so I will access valid and then reverse it by adding an exclamation 37 00:03:08,610 --> 00:03:15,420 mark at the beginning to turn true to false and false to true because I'm passing the opposite. With 38 00:03:15,420 --> 00:03:20,280 that, let's save this and let's go back to the app and now, everything is invalid at the beginning which 39 00:03:20,280 --> 00:03:27,260 makes sense. As soon as I enter something though, things become valid, the zip code only after five characters 40 00:03:27,480 --> 00:03:29,070 and not with more. 41 00:03:29,070 --> 00:03:36,280 So we can see that now indeed we are correctly returning information about the validity, 42 00:03:36,330 --> 00:03:42,910 we also see though that it's not that friendly to start with a page which, with a form that's just 43 00:03:42,950 --> 00:03:48,980 red, we also see that our dropdown is always red even though we have no validation rules there, 44 00:03:48,990 --> 00:03:50,960 so we definitely need some fine tuning. 45 00:03:51,010 --> 00:03:52,730 Let's start with the dropdown, 46 00:03:52,890 --> 00:03:56,650 we shouldn't always add invalid, props.invalid 47 00:03:56,670 --> 00:03:57,520 true or false, 48 00:03:57,540 --> 00:04:04,480 that's nice to have but we have an issue in cases like our dropdown where we have no rules. 49 00:04:04,920 --> 00:04:07,820 So what I should also check if it's invalid 50 00:04:08,040 --> 00:04:17,280 and if we maybe have like props.shouldValidate property. I now can set up shouldValidate in my contact 51 00:04:17,310 --> 00:04:25,440 data as an additional property I passed to my input and shouldValidate should only be true if my object 52 00:04:25,440 --> 00:04:28,890 in the orderForm has a validation object, 53 00:04:28,890 --> 00:04:33,000 my delivery method which is the dropdown in the end hasn't 54 00:04:33,210 --> 00:04:35,820 so it shouldn't validate at all. 55 00:04:35,820 --> 00:04:43,990 So here I will simply pass form element config validation 56 00:04:44,000 --> 00:04:50,630 and if the validation property isn't set as for my dropdown, this will return true or false and therefore 57 00:04:50,780 --> 00:04:56,100 this if check in my input component here will not run and it will never get the invalid class, 58 00:04:56,210 --> 00:05:00,160 so now we can see the dropdown is not treated as invalid anymore. 59 00:05:00,620 --> 00:05:04,190 We also have to ensure that everything is invalid right from the start, 60 00:05:04,190 --> 00:05:08,270 so we should also track whether an input has been touched by the user or not, 61 00:05:08,450 --> 00:05:10,740 let's do this in the next lecture.