1
00:00:02,520 --> 00:00:04,390
Now that we explored buttons

2
00:00:04,390 --> 00:00:07,440
in greater detail, let's come back to the form itself

3
00:00:07,440 --> 00:00:10,590
and let's talk about validation.

4
00:00:10,590 --> 00:00:13,850
Validation is that part where I, for example,

5
00:00:13,850 --> 00:00:16,770
enter an invalid email address

6
00:00:16,770 --> 00:00:21,713
into a field of type email as this field is.

7
00:00:22,690 --> 00:00:25,910
And then I get a warning when I tried to submit this.

8
00:00:25,910 --> 00:00:27,720
The browser shows me this warning

9
00:00:27,720 --> 00:00:31,180
that this is not a valid email address.

10
00:00:31,180 --> 00:00:35,590
And we very often wanna add validation like this

11
00:00:35,590 --> 00:00:40,590
to ensure that only valid forms can be sent to a server.

12
00:00:41,430 --> 00:00:44,700
Now as you see here for some inputs,

13
00:00:44,700 --> 00:00:47,580
like for example, the inputs of type email,

14
00:00:47,580 --> 00:00:50,490
we get some validation out of the box.

15
00:00:50,490 --> 00:00:53,900
We could override that by going to the form element

16
00:00:53,900 --> 00:00:58,420
and adding novalidate as a attribute here.

17
00:00:58,420 --> 00:01:02,410
By the way, here, you don't even need to assign a value,

18
00:01:02,410 --> 00:01:06,040
you can just add the attribute without a value

19
00:01:06,040 --> 00:01:10,460
because this acts as a so-called Boolean value,

20
00:01:10,460 --> 00:01:13,030
which basically just means that in this case,

21
00:01:13,030 --> 00:01:14,810
for this kind of attribute,

22
00:01:14,810 --> 00:01:18,590
the existence of this attribute is enough

23
00:01:18,590 --> 00:01:21,370
to already change to behavior of the element

24
00:01:21,370 --> 00:01:22,830
on which you add it.

25
00:01:22,830 --> 00:01:26,970
It needs no extra value to then configure this attribute.

26
00:01:26,970 --> 00:01:30,610
Here, it's just about whether this attribute is there

27
00:01:30,610 --> 00:01:32,310
or not there.

28
00:01:32,310 --> 00:01:36,000
And if it is there, if it is placed on a form element,

29
00:01:36,000 --> 00:01:40,930
then you disable this built-in browser validation.

30
00:01:40,930 --> 00:01:44,470
So here now with novalidate added on the form,

31
00:01:44,470 --> 00:01:47,170
if I enter an invalid email address again,

32
00:01:47,170 --> 00:01:49,570
you'll notice that now if I click submit,

33
00:01:49,570 --> 00:01:51,960
this works and this is submitted

34
00:01:51,960 --> 00:01:55,490
because I disabled this built-in validation.

35
00:01:55,490 --> 00:01:58,370
And sometimes that is also what you want.

36
00:01:58,370 --> 00:02:00,350
For example, because maybe,

37
00:02:00,350 --> 00:02:03,180
you also write your own JavaScript code

38
00:02:03,180 --> 00:02:06,240
to bring your own validation logic.

39
00:02:06,240 --> 00:02:09,600
Something we can't do yet, but something we can do

40
00:02:09,600 --> 00:02:12,540
with JavaScript, which we are going to explore

41
00:02:12,540 --> 00:02:14,980
a little bit later in the course.

42
00:02:14,980 --> 00:02:18,910
But here, I definitely want to use that built-in validation,

43
00:02:18,910 --> 00:02:23,203
so I will remove that novalidate attribute from the form.

44
00:02:24,510 --> 00:02:27,840
And now, instead, I wanna show you other kinds

45
00:02:27,840 --> 00:02:31,760
of built-in validation, which we can add to our elements

46
00:02:31,760 --> 00:02:33,740
and which we can leverage.

47
00:02:33,740 --> 00:02:36,250
We've got the built in validation for the email,

48
00:02:36,250 --> 00:02:37,850
but what about the name?

49
00:02:37,850 --> 00:02:41,700
Here, for this name, we have no validation.

50
00:02:41,700 --> 00:02:44,760
And indeed, any names should be allowed here.

51
00:02:44,760 --> 00:02:47,620
We definitely don't wanna restrict that,

52
00:02:47,620 --> 00:02:49,910
but I definitely do want to ensure

53
00:02:49,910 --> 00:02:52,090
that something is entered here,

54
00:02:52,090 --> 00:02:56,143
that this field is not submitted in an empty state.

55
00:02:57,060 --> 00:03:01,200
And I can ensure this by adding yet another attribute here,

56
00:03:01,200 --> 00:03:05,350
which you can add to any input element,

57
00:03:05,350 --> 00:03:08,303
and that's the required attribute.

58
00:03:09,450 --> 00:03:13,410
Just like novalidate, that is a Boolean attribute,

59
00:03:13,410 --> 00:03:16,160
which means it's pure existence is enough.

60
00:03:16,160 --> 00:03:18,670
And if that attribute is added,

61
00:03:18,670 --> 00:03:21,260
then this field on which you added it

62
00:03:21,260 --> 00:03:24,810
is required and must not be empty.

63
00:03:24,810 --> 00:03:28,110
So if I save this now with required added

64
00:03:28,110 --> 00:03:31,910
on that username input, if I now try to submit this form

65
00:03:31,910 --> 00:03:34,220
without entering anything here,

66
00:03:34,220 --> 00:03:36,770
then you see I get this warning

67
00:03:36,770 --> 00:03:39,840
that I should fill something into this field.

68
00:03:39,840 --> 00:03:43,690
So that's some nice built-in validation which we can get.

69
00:03:43,690 --> 00:03:46,480
Now we can leverage that new knowledge also

70
00:03:46,480 --> 00:03:47,940
on the password field.

71
00:03:47,940 --> 00:03:50,870
This should also be required.

72
00:03:50,870 --> 00:03:52,520
But in case of the password,

73
00:03:52,520 --> 00:03:55,250
it also should not just be required,

74
00:03:55,250 --> 00:03:58,070
it may be should also have a minimum length,

75
00:03:58,070 --> 00:04:00,690
which we wanna ensure so that the password

76
00:04:00,690 --> 00:04:03,603
must be at least, let's say seven characters long.

77
00:04:04,530 --> 00:04:07,340
For this, we get another attribute, which we can add.

78
00:04:07,340 --> 00:04:10,390
The minlength attribute.

79
00:04:10,390 --> 00:04:12,970
And you also have a maxlength attribute

80
00:04:12,970 --> 00:04:15,270
in case you want the opposite.

81
00:04:15,270 --> 00:04:20,269
So here at one minlength, and then here we do need a value

82
00:04:20,450 --> 00:04:23,190
because we need to set that minimum length,

83
00:04:23,190 --> 00:04:24,593
which we want to get.

84
00:04:25,450 --> 00:04:28,200
So we could set this to seven, for example,

85
00:04:28,200 --> 00:04:32,600
to expect at least seven characters as a password.

86
00:04:32,600 --> 00:04:36,533
But you can use any length you want any number you want.

87
00:04:37,420 --> 00:04:40,600
So if I save this now, if I submit this form

88
00:04:40,600 --> 00:04:41,940
without entering anything,

89
00:04:41,940 --> 00:04:44,370
I get this warning regarding the name.

90
00:04:44,370 --> 00:04:46,250
Now if I do enter a name here,

91
00:04:46,250 --> 00:04:49,870
then I get a warning regarding the password.

92
00:04:49,870 --> 00:04:52,420
Now, if I do enter something here, which is not long enough,

93
00:04:52,420 --> 00:04:55,720
I get that our warning that I need seven characters

94
00:04:55,720 --> 00:04:57,160
or more.

95
00:04:57,160 --> 00:05:01,800
So you see, that this warning even picks up the length,

96
00:05:01,800 --> 00:05:05,810
which we specified in our minlength attribute,

97
00:05:05,810 --> 00:05:09,640
the seven here, so that's very handy.

98
00:05:09,640 --> 00:05:12,680
And of course, if I do enter a password that is long enough,

99
00:05:12,680 --> 00:05:15,473
then I can submit this without issues.

100
00:05:17,360 --> 00:05:20,160
Now, we also might want to add required here,

101
00:05:20,160 --> 00:05:23,760
to this email address here.

102
00:05:23,760 --> 00:05:27,020
And with that, we definitely improved this form

103
00:05:27,020 --> 00:05:30,330
by enforcing certain rules here.

104
00:05:30,330 --> 00:05:32,310
But that's not all I wanna do.

105
00:05:32,310 --> 00:05:36,410
Here for the age, we also might want some validation.

106
00:05:36,410 --> 00:05:40,490
Here, we also might want to require that field

107
00:05:40,490 --> 00:05:42,280
so that it's not empty.

108
00:05:42,280 --> 00:05:45,870
And we also might want to enforce a minimum age,

109
00:05:45,870 --> 00:05:49,730
maybe one, maybe 18, whatever makes sense

110
00:05:49,730 --> 00:05:52,070
for the website of you're building.

111
00:05:52,070 --> 00:05:56,600
And here, let's say we wanna enforce the age of at least 18.

112
00:05:56,600 --> 00:05:59,130
For this, we can go to this age field,

113
00:05:59,130 --> 00:06:01,510
and first of all, make it required

114
00:06:01,510 --> 00:06:04,340
so that it must not be empty.

115
00:06:04,340 --> 00:06:08,053
But then, here we can use the min attribute.

116
00:06:09,540 --> 00:06:13,800
Not minlength because minlength controls the amount

117
00:06:13,800 --> 00:06:16,040
of characters that has to be added,

118
00:06:16,040 --> 00:06:19,640
but min, which sets the minimum value,

119
00:06:19,640 --> 00:06:22,760
which has to be entered in this input field.

120
00:06:22,760 --> 00:06:25,790
And there also is max in case you wanna restrict

121
00:06:25,790 --> 00:06:28,170
the maximum value.

122
00:06:28,170 --> 00:06:32,810
And here, we could say the minimum value should be 18

123
00:06:32,810 --> 00:06:37,120
and the maximum value should maybe be 100.

124
00:06:37,120 --> 00:06:40,300
And I know that you can get older than 100,

125
00:06:40,300 --> 00:06:41,983
it is just an example here.

126
00:06:43,040 --> 00:06:46,420
If we add min and max like this to the age field,

127
00:06:46,420 --> 00:06:49,210
then you will notice that here,

128
00:06:49,210 --> 00:06:52,310
if I don't fill in anything into this age field,

129
00:06:52,310 --> 00:06:57,270
but I do fill in something into the our fields here,

130
00:06:57,270 --> 00:06:59,810
then you will notice that if I try to submit this,

131
00:06:59,810 --> 00:07:03,200
I get the warning that I need to fill in some value

132
00:07:03,200 --> 00:07:04,363
into the age field.

133
00:07:05,660 --> 00:07:07,990
Now, if I enter one year, which of course,

134
00:07:07,990 --> 00:07:11,160
is smaller than 18, then I get the warning

135
00:07:11,160 --> 00:07:15,180
that the value must be greater than or equal to 18.

136
00:07:15,180 --> 00:07:19,300
If I enter 101, you already might guess it.

137
00:07:19,300 --> 00:07:23,240
I get the warning that I must have a value smaller than 100

138
00:07:23,240 --> 00:07:25,270
or equal to 100.

139
00:07:25,270 --> 00:07:29,690
So if I enter a valid age then, I can submit this again.

140
00:07:29,690 --> 00:07:33,180
And that is how we can add validation.

141
00:07:33,180 --> 00:07:37,030
Now, it's a bit more special if we talk about the birth date

142
00:07:37,030 --> 00:07:40,570
because here, we also can require this field

143
00:07:40,570 --> 00:07:43,030
and we also can set a min and max value,

144
00:07:43,030 --> 00:07:47,720
but here, min is not a number, but instead a date.

145
00:07:47,720 --> 00:07:51,320
And a date expressed in a certain format,

146
00:07:51,320 --> 00:07:53,993
which should look like this.

147
00:07:55,800 --> 00:08:00,100
This would say that the min date is first January, 1921.

148
00:08:00,100 --> 00:08:02,230
We can also set a max date

149
00:08:02,230 --> 00:08:07,153
and set that, let's say, to 2003-01-01.

150
00:08:08,398 --> 00:08:11,220
And if I set that, then you will also notice

151
00:08:11,220 --> 00:08:14,410
that the date picker actually picks up

152
00:08:14,410 --> 00:08:16,620
that max and min date.

153
00:08:16,620 --> 00:08:19,420
The highest value I can pick in a date picker now

154
00:08:19,420 --> 00:08:24,420
is January 1st, 2003 because that's my max value here.

155
00:08:25,200 --> 00:08:28,500
And also, my min value is restricted.

156
00:08:28,500 --> 00:08:33,500
Here, I can't go back more than to 1921.

157
00:08:34,100 --> 00:08:36,179
So to date picker respects that.

158
00:08:36,179 --> 00:08:40,330
And if I would try to enter something invalid here,

159
00:08:40,330 --> 00:08:44,120
then of course, I would also get an error,

160
00:08:44,120 --> 00:08:48,660
though I need to fill in those other fields first.

161
00:08:48,660 --> 00:08:52,483
So let me quickly do that.

162
00:08:54,030 --> 00:08:55,320
And now if I submit this,

163
00:08:55,320 --> 00:08:57,850
I get this warning regarding the date.

164
00:08:57,850 --> 00:08:59,830
So that's how you can set min and max.

165
00:08:59,830 --> 00:09:02,760
When working with a date, you need to set a date

166
00:09:02,760 --> 00:09:07,720
in this kind of format for the min and max attributes.

167
00:09:07,720 --> 00:09:10,600
Now, you can also use these validation attributes

168
00:09:10,600 --> 00:09:13,200
on radio buttons, for example.

169
00:09:13,200 --> 00:09:16,680
You can require radio buttons.

170
00:09:16,680 --> 00:09:21,130
For that, I add required on all three radio buttons.

171
00:09:21,130 --> 00:09:23,590
And if I do that, it does not mean

172
00:09:23,590 --> 00:09:26,810
that all three radio buttons have to be checked,

173
00:09:26,810 --> 00:09:28,530
that would be impossible,

174
00:09:28,530 --> 00:09:31,690
but it means that at least one of them has to be checked.

175
00:09:31,690 --> 00:09:34,720
So if I don't check any of these buttons,

176
00:09:34,720 --> 00:09:39,560
but I do fill out the other fields with valid dates,

177
00:09:39,560 --> 00:09:42,740
let me quickly do that, then you see,

178
00:09:42,740 --> 00:09:45,840
I get a warning regarding those radio buttons.

179
00:09:45,840 --> 00:09:48,490
But as soon as I select at least one of them,

180
00:09:48,490 --> 00:09:50,273
I can submit the form again.

181
00:09:51,180 --> 00:09:54,643
And that's how these validation attributes work.