1
00:00:02,060 --> 00:00:10,330
To turn off the order button if the form is invalid, I need to find out if my overall form is invalid

2
00:00:10,710 --> 00:00:15,300
and how do we find this out? In the end,

3
00:00:15,300 --> 00:00:23,400
there are of course a couple of ways, we could for example add a controls array to our orderForm and now

4
00:00:23,430 --> 00:00:30,510
add all the controls to that and then add another property which is valid for the overall form and we

5
00:00:30,510 --> 00:00:33,020
update this when ever the user enters values.

6
00:00:33,270 --> 00:00:39,450
Now this would require quite some refactoring here and it's only one approach, we can of course also

7
00:00:39,630 --> 00:00:43,210
simply add a new property in our state,

8
00:00:43,350 --> 00:00:53,220
so after our orderForm which is this object, we could add a FormIsValid property which is false initially

9
00:00:53,460 --> 00:00:54,960
which we now want to update,

10
00:00:55,110 --> 00:01:02,190
so whatever you like, you can use both approaches and then in inputChangedHandler,

11
00:01:02,190 --> 00:01:09,660
so whenever we type, I in the end want to check if all elements are valid right now and if they are all

12
00:01:09,660 --> 00:01:13,860
valid, I'll set this FormIsValid state to valid.

13
00:01:13,860 --> 00:01:17,790
So here I'll add a new constant, constant

14
00:01:17,820 --> 00:01:22,170
is FormIsValid also to false

15
00:01:22,620 --> 00:01:28,520
and then, I now need to check all my inputs for their validity.

16
00:01:28,530 --> 00:01:35,040
So here, I'll simply for a loop through all my input identifiers,

17
00:01:36,040 --> 00:01:44,970
in updated orderForm, this is the state object which contains all my elements and I want to set

18
00:01:45,000 --> 00:01:47,040
FormIsValid here, should be a variable

19
00:01:47,040 --> 00:01:51,780
therefore, I want to set this equal to updatedOrderForm,

20
00:01:51,930 --> 00:01:56,300
select a given identifier, input identifier,

21
00:01:56,580 --> 00:02:04,710
this should also be input identifier, singular and there, access this valid property,

22
00:02:05,120 --> 00:02:09,740
so the property we're setting here in the end but here we're setting it for one element, here I'm looping

23
00:02:09,740 --> 00:02:11,020
through all the elements.

24
00:02:11,820 --> 00:02:17,460
I not only want to set it to this because then again, we would run into the problem that only the last

25
00:02:17,460 --> 00:02:20,960
check is the one determining the value of FormIsValid,

26
00:02:21,180 --> 00:02:30,110
so therefore I'll switch FormIsValid to true initially and check is this given element valid and is

27
00:02:30,180 --> 00:02:37,050
FormIsValid in general true? Only if both is the case, FormIsValid is updated to true

28
00:02:37,230 --> 00:02:43,120
and if this is false and FormIsValid was true then the resulting value will be false and FormIsValid

29
00:02:43,220 --> 00:02:47,340
will be set to false because false overrides true.

30
00:02:47,850 --> 00:02:53,550
And with tha,t I can then set my state and not only set the order form but also set FormIsValid

31
00:02:53,550 --> 00:02:56,640
equal to FormIsValid,

32
00:02:56,640 --> 00:03:03,090
so to my variable here. So again, the right side here, FormIsValid is referring to my variable,

33
00:03:03,110 --> 00:03:06,920
FormIsValid, the left side is referring to the property in the state

34
00:03:06,920 --> 00:03:07,910
I want to update

35
00:03:08,030 --> 00:03:11,440
which of course is this FormIsValid property here.

36
00:03:12,820 --> 00:03:17,030
So with that, we should now know the overall form validity

37
00:03:17,170 --> 00:03:19,690
and this allows us to disable the button.

38
00:03:19,900 --> 00:03:29,000
So I'll bind the diabled attribute on the button to this state FormIsValid or to be precise, to

39
00:03:29,020 --> 00:03:30,070
the opposite

40
00:03:30,070 --> 00:03:31,960
only if the form is not valid,

41
00:03:32,050 --> 00:03:36,930
this should be disabled. So disable is true if the form is not valid.

42
00:03:37,350 --> 00:03:37,870
Let's save

43
00:03:37,870 --> 00:03:39,590
this and let's see the result.

44
00:03:39,640 --> 00:03:45,040
We actually have to inspect the button because we have no special styling for invalid buttons and we

45
00:03:45,040 --> 00:03:49,020
see right at the start, it is treated as valid

46
00:03:49,030 --> 00:03:52,970
unfortunately because it is not disabled.

47
00:03:53,290 --> 00:03:56,830
If I enter something here, this never changes,

48
00:03:57,040 --> 00:04:03,630
so our button isn't really updated with the state of our form,

49
00:04:03,640 --> 00:04:07,770
it's not really using our validity,

50
00:04:07,770 --> 00:04:15,410
why? Well because we use our own button element and there, we don't know a disabled property.

51
00:04:15,650 --> 00:04:24,540
We have to go to our button element and there, we can set disabled on this button and set it to props.disabled

52
00:04:24,540 --> 00:04:25,330
.

53
00:04:25,370 --> 00:04:31,490
So to that property I just defined because you have to remember, we are not using the original hrml button

54
00:04:31,510 --> 00:04:31,870
there,

55
00:04:31,940 --> 00:04:33,800
we're using our own implementation

56
00:04:33,920 --> 00:04:41,380
so there we need to expect a disabled prop and pass it on to the native button disabled attribute.

57
00:04:41,780 --> 00:04:44,410
With that if we save all files and go back,

58
00:04:44,540 --> 00:04:46,810
now you see it's disabled at the start

59
00:04:47,180 --> 00:04:52,900
and if I enter something here, let's fill out all these inputs here with valid data.

60
00:04:53,770 --> 00:04:59,170
So now it should become valid except for that it doesn't

61
00:04:59,170 --> 00:05:05,950
so let's find out why is the validity not updated correctly. In the contact data component,

62
00:05:05,950 --> 00:05:12,920
it looks like we're not setting FormIsValid to true even if the whole form should be valid.

63
00:05:13,160 --> 00:05:19,740
Let's confirm this by logging FormIsValid here in the inputChangedHandler

64
00:05:19,740 --> 00:05:26,350
and let's go back, open the console log and enter something in all these fields and you'll see, it's

65
00:05:26,350 --> 00:05:28,670
constantly undefined,

66
00:05:29,110 --> 00:05:32,530
why is that?

67
00:05:32,580 --> 00:05:35,080
This is related to our inputs,

68
00:05:35,190 --> 00:05:41,540
remember we have this dropdown which doesn't have any validation rules attached to it.

69
00:05:41,650 --> 00:05:45,040
Now it also doesn't have a valid property therefore

70
00:05:45,390 --> 00:05:51,780
and if we then loop through all the elements and use this valid attribute, it of course isn't true or

71
00:05:51,780 --> 00:05:57,470
false for the dropdown, it's undefined and undefined is always treated as false

72
00:05:57,480 --> 00:06:00,050
but it also never changes to true.

73
00:06:00,510 --> 00:06:08,670
So a way to fix this is to simply still add this valid property to the dropdown even though it of course

74
00:06:08,670 --> 00:06:10,520
doesn't have any validation rules

75
00:06:10,530 --> 00:06:12,610
but therefore it should always be valid,

76
00:06:12,780 --> 00:06:17,640
so that's our delivery method dropdown. With that changed,

77
00:06:17,700 --> 00:06:24,980
if we now enter something valid into all these fields, let me inspect the order,

78
00:06:25,230 --> 00:06:30,710
if I now enter a valid email address here, you'll see the button becomes enabled.

79
00:06:30,720 --> 00:06:38,730
Now I can remove a method I added for debugging to my inputChangedHandler and now of course, we also

80
00:06:38,730 --> 00:06:40,560
need to adjust the button.

81
00:06:40,680 --> 00:06:45,390
So on the button, we now need a special styling if it's disabled,

82
00:06:45,420 --> 00:06:53,280
so let's go to button.css and there, I'll add a special class for my button class special styling I

83
00:06:53,280 --> 00:06:57,060
should say, for the disabled pseudo selector

84
00:06:57,060 --> 00:07:03,260
I want to set the color to this gray-ish look so that the button really looks disabled.

85
00:07:03,300 --> 00:07:11,910
Let's also set the cursor to not allowed here so that the cursor also reflects that we can't click

86
00:07:11,910 --> 00:07:12,840
this,

87
00:07:12,840 --> 00:07:16,070
now we're also showing that this is disabled.

88
00:07:16,070 --> 00:07:23,930
Now let's turn our heads towards a tiny error you might already have discovered. If we changed a

89
00:07:23,970 --> 00:07:30,260
value in the dropdown, we actually get an error message related to our validation.

90
00:07:30,480 --> 00:07:33,650
Let's fix this error in the next lecture.