1
00:00:02,140 --> 00:00:08,900
Do not start with an all red form here, we have to track whatever a user already touched an input or

2
00:00:08,900 --> 00:00:09,860
not.

3
00:00:09,890 --> 00:00:12,370
So back in contact data here,

4
00:00:12,590 --> 00:00:22,680
I want to also add a new property to each form element in my orderForm object here, I'll set it to touched

5
00:00:23,060 --> 00:00:30,710
and I'll set this to false initially and now I'll copy that to all the elements here where I have validation

6
00:00:30,710 --> 00:00:31,630
in place,

7
00:00:33,620 --> 00:00:42,140
like that and I can then make sure that I only check the validity if the element was touched,

8
00:00:42,150 --> 00:00:44,330
otherwise I don't want to check the validity,

9
00:00:44,340 --> 00:00:45,890
I don't want to return errors.

10
00:00:45,900 --> 00:00:51,790
So now to update the touched value, I'll go to my inputChangedHandler where we of course know that the user

11
00:00:51,780 --> 00:00:53,760
typed something or changed something

12
00:00:53,760 --> 00:01:00,090
so at this point of time something has been changed. And now in there, I went to update

13
00:01:00,090 --> 00:01:07,270
touched, so on the updatedFormElement, I'll now set touched here to true.

14
00:01:08,380 --> 00:01:15,170
Now I only want to add this class, this invalid class if the element has been touched,

15
00:01:15,490 --> 00:01:23,440
so I'll pass this touched information on our touch property let's say, to my input component form element

16
00:01:23,890 --> 00:01:26,440
and there I have config

17
00:01:26,530 --> 00:01:32,980
and now this new touched value. And in the input element, in this first check where we attached the invalid

18
00:01:32,980 --> 00:01:34,010
class,

19
00:01:34,210 --> 00:01:43,870
I only want to attach it if the input is invalid and should validate and if props.touched is true, so

20
00:01:43,870 --> 00:01:48,770
that we don't set this or mark this as invalid if it hasn't been touched yet.

21
00:01:49,150 --> 00:01:51,410
So now you see it's not red by default,

22
00:01:51,460 --> 00:01:58,470
if I start entering something invalid here though, now it is invalid until well it is valid again.

23
00:01:58,510 --> 00:02:05,130
So this is now a simple way of creating a form which is more user friendly,

24
00:02:05,140 --> 00:02:12,250
let's now also make sure that we can submit it, that the order button is disabled whilst the whole form

25
00:02:12,340 --> 00:02:13,450
is invalid.

26
00:02:13,660 --> 00:02:16,120
Let's fix this in the next lecture.