1
00:00:00,180 --> 00:00:05,340
In this lecture, we're going to start handling form submissions for the registration form.

2
00:00:05,700 --> 00:00:08,370
Validation will play a part in this process.

3
00:00:08,640 --> 00:00:13,050
Users shouldn't be able to submit the form until every field is valid.

4
00:00:13,410 --> 00:00:18,030
The form group object contains properties for checking the validity of the form.

5
00:00:18,300 --> 00:00:23,430
In the resource section of this lecture, I provide a link to the Form Group class.

6
00:00:23,820 --> 00:00:28,350
We've talked about this already, but I want to mention it again on this page.

7
00:00:28,440 --> 00:00:32,340
We will find the class definition for the Form Group Class.

8
00:00:32,700 --> 00:00:36,540
The Form Group class extends the abstract control class.

9
00:00:36,900 --> 00:00:39,990
Statuses are not exclusive to form controls.

10
00:00:40,290 --> 00:00:44,670
We have access to the same properties we had on the form control class.

11
00:00:45,060 --> 00:00:49,050
This means we can check the current validation status of our form.

12
00:00:49,650 --> 00:00:56,250
Unlike before, the values for these properties will present an entire form instead of a single field.

13
00:00:56,640 --> 00:00:59,910
For example, we have a property called valid.

14
00:01:00,210 --> 00:01:04,470
If we have one invalid field, the entire form is invalid.

15
00:01:04,769 --> 00:01:08,010
We can expect this property to return false.

16
00:01:08,580 --> 00:01:14,160
We will use these properties to prevent the form from being submitted if the form is invalid.

17
00:01:14,490 --> 00:01:15,570
Let's get started.

18
00:01:15,930 --> 00:01:19,080
Open the register template file in your editor.

19
00:01:21,510 --> 00:01:26,970
First, we should prevent users from submitting the form if the entire form is invalid.

20
00:01:27,360 --> 00:01:31,980
We can disable the button in our form to prevent users from submitting the form.

21
00:01:32,310 --> 00:01:35,700
The button for the form can be found at the bottom of the form.

22
00:01:38,450 --> 00:01:45,710
On this element, we will bind the disabled attribute to the register form dot invalid property.

23
00:01:48,320 --> 00:01:53,660
The invalid property will store a Boolean value based on the validity of the form.

24
00:01:54,030 --> 00:01:56,990
It'll be set to true if the form is invalid.

25
00:01:57,410 --> 00:02:03,650
The binding should effectively stop users from submitting the form if there are issues before moving

26
00:02:03,650 --> 00:02:04,220
forward.

27
00:02:04,370 --> 00:02:12,110
We should make it visually obvious the button is disabled by default tailwind reset styles for most

28
00:02:12,110 --> 00:02:13,550
elements in the browser.

29
00:02:13,970 --> 00:02:18,200
The appearance of the button may look the same, whether it's disabled or not.

30
00:02:18,560 --> 00:02:23,210
It's considered good practice to give visual cues for interactive elements.

31
00:02:23,510 --> 00:02:29,840
In the resource section of this lecture, I provide a link to a list of classes for Element States.

32
00:02:32,400 --> 00:02:39,360
Every class we apply to an element will change a property, on the other hand, we may not want to immediately

33
00:02:39,360 --> 00:02:41,460
change the property of an element.

34
00:02:41,790 --> 00:02:46,140
It's possible to apply properties based on a state of an element.

35
00:02:46,500 --> 00:02:51,570
For example, we can apply properties for when an element is being hovered over.

36
00:02:51,900 --> 00:02:58,080
In our case, we want to change the appearance of the button if it's disabled on the sidebar.

37
00:02:58,200 --> 00:03:00,330
There's a section called disabled.

38
00:03:02,930 --> 00:03:08,240
Right away, we will be presented with an example relative to our current situation.

39
00:03:08,630 --> 00:03:15,410
If you want to change the appearance of a disabled button, we need to prefix a class with the disabled

40
00:03:15,410 --> 00:03:16,250
prefixed.

41
00:03:16,790 --> 00:03:22,940
This example shows us how a button's appearance will change based on the buttons disabled property.

42
00:03:23,330 --> 00:03:25,610
Let's copy the class from this example.

43
00:03:28,240 --> 00:03:33,220
The opacity 50 class will change in elements opacity by 50 percent.

44
00:03:33,700 --> 00:03:36,790
I think changing the opacity will work for our form.

45
00:03:37,180 --> 00:03:41,410
Back in the template, we will paste this class into the button element.

46
00:03:43,930 --> 00:03:49,960
If we look closely, we will find another example of a variant for when the user hovers their mouse

47
00:03:49,960 --> 00:03:51,130
over this element.

48
00:03:51,460 --> 00:03:54,520
The background colour of the button will become darker.

49
00:03:54,880 --> 00:04:00,820
We can change the appearance of an element by fixing the classes with the appropriate variant.

50
00:04:01,330 --> 00:04:02,380
We're not done yet.

51
00:04:02,620 --> 00:04:04,600
We should disable the hover effect.

52
00:04:04,870 --> 00:04:08,290
Otherwise, the user may think they can click on the button.

53
00:04:08,650 --> 00:04:14,170
The disabled classes can override hover classes if they effect the same property.

54
00:04:14,530 --> 00:04:19,600
Let's add the following class disabled big indigo four hundred.

55
00:04:22,230 --> 00:04:28,950
The original color was 400, the hover effect can be disabled if the background color remains the same

56
00:04:29,250 --> 00:04:30,900
after making those changes.

57
00:04:30,960 --> 00:04:34,590
Let's test our form refresh the page in the browser.

58
00:04:36,130 --> 00:04:38,290
Initially, the form is disabled.

59
00:04:38,530 --> 00:04:41,830
Keep in mind, validation is performed right away.

60
00:04:42,220 --> 00:04:47,080
The error messages are not appearing because the fields haven't been touched.

61
00:04:47,350 --> 00:04:52,120
We've added structural directives to the error messages to prevent them from appearing.

62
00:04:52,480 --> 00:04:55,600
We want to give the user a chance to fill out the form.

63
00:04:55,960 --> 00:04:59,890
Next, let's try filling out the form with valid values.

64
00:05:02,870 --> 00:05:08,180
After filling out the form, the button is enabled, we can move on to submitting the form.

65
00:05:08,420 --> 00:05:11,150
We will handle this task in the next lecture.