WEBVTT

0
00:00.200 --> 00:01.610
All right, all right, All right.

1
00:01.640 --> 00:04.820
Now I want to talk about this setCustomValidity() method.

2
00:04.820 --> 00:08.960
It is such an important method that I want to look at a few examples.

3
00:09.050 --> 00:11.060
And this is the example we looked at previously.

4
00:11.060 --> 00:13.620
We just had a text type of input.

5
00:13.640 --> 00:14.630
That's all we had.

6
00:14.900 --> 00:19.520
And why don't we just see how this setCustomValidity() works on this?

7
00:19.730 --> 00:24.620
So right now let's remove required, so there's no constraint or built-in validation.

8
00:24.830 --> 00:31.160
And now what I want to do is I want to access this method. So we access our text input. On here,

9
00:31.160 --> 00:34.640
we can access the Constraint Validation API directly.

10
00:34.640 --> 00:38.300
We don't have to do anything special, but this time I want to access that method.

11
00:38.330 --> 00:44.120
The method is called setCustomValidity(). And I want you to notice something

12
00:44.120 --> 00:48.530
when I start doing this right. I'm going to type our error saying this is an error

13
00:49.490 --> 00:51.050
that never stops.

14
00:51.050 --> 00:59.090
And if we save this and we go to our form, if now the user tries to submit, we are going to get an

15
00:59.090 --> 01:07.010
error because this is basically telling the browser that this text input field is now in error state

16
01:07.010 --> 01:09.410
and that we want to show an error message.

17
01:09.410 --> 01:11.300
And of course it never stops, right?

18
01:11.300 --> 01:14.510
The user is not able to ever submit this form.

19
01:14.510 --> 01:16.910
So this is an important aspect of using this method.

20
01:16.910 --> 01:22.760
When you use it, it's going to make this input or whatever element you're using or putting it on,

21
01:22.790 --> 01:27.290
it's going to make it invalid. And I can prove it to you. Within here,

22
01:27.320 --> 01:30.420
why don't we style up the :invalid pseudo class?

23
01:30.440 --> 01:37.280
Let's grab our input, style up the :invalid state, and we can just give it a red border - border, 1 pixel

24
01:37.280 --> 01:38.330
solid red.

25
01:38.330 --> 01:45.440
And now you can see that the default state is invalid because we've set this custom validity error message.

26
01:45.440 --> 01:48.800
We basically telling the browser this is now invalid.

27
01:48.800 --> 01:51.170
"So then, Clyde, how do we make it not invalid?"

28
01:51.180 --> 01:57.420
Well, if you set the value to an empty string,

29
01:58.070 --> 01:59.660
it's valid again.

30
02:00.050 --> 02:06.020
So if now we access our textInput variable again, which is that input element itself, we can access

31
02:06.020 --> 02:10.910
the setCustomValidity() method again, but this time just set it to an empty string.

32
02:10.910 --> 02:14.270
If we do this, save it is now valid.

33
02:14.270 --> 02:15.800
We don't have that error anymore.

34
02:15.830 --> 02:18.350
The user can now type and submit.

35
02:18.770 --> 02:20.180
Okay, Clyde, I get it.

36
02:20.180 --> 02:21.170
I get it.

37
02:21.170 --> 02:24.370
But how do we actually use this in a practical sense?

38
02:24.380 --> 02:27.020
Well, why don't we look at an example right now?

39
02:27.020 --> 02:30.350
We'll change this input of type text to an input of type email.

40
02:30.350 --> 02:38.000
And if there's an error in the format of that email, why don't we display our own custom error message?

41
02:38.000 --> 02:38.810
How awesome.

42
02:38.810 --> 02:40.280
This is going to be so much fun.

43
02:40.310 --> 02:41.540
See if you can give it a go.

44
02:41.540 --> 02:47.030
So pause the video, see if you can give it a go and then let's code it up together.

45
02:49.320 --> 02:50.490
Did you give it a go?

46
02:50.970 --> 02:51.780
I hope so.

47
02:51.780 --> 02:52.900
But if not, don't worry.

48
02:52.920 --> 02:53.670
Let's do it now.

49
02:53.700 --> 02:54.190
Together.

50
02:54.210 --> 02:59.100
The first thing I want to do is I want to remove this input of type text.

51
02:59.190 --> 02:59.610
Okay.

52
02:59.610 --> 03:04.350
And we want to replace this input with input of type email.

53
03:04.590 --> 03:05.670
That's all we want to do.

54
03:05.700 --> 03:09.780
We can give it a name of "mail", we can give it an ID of "mail".

55
03:09.780 --> 03:15.960
And because we're giving it an ID of mail, why don't we specify a label here of mail and we can say,

56
03:15.960 --> 03:18.660
please give me a valid

57
03:19.960 --> 03:21.670
email address.

58
03:21.850 --> 03:22.210
Right.

59
03:22.210 --> 03:23.140
Very, very simple.

60
03:23.140 --> 03:28.630
So now we've got an email, but if the user tries to submit just random text, we get this error message

61
03:28.630 --> 03:29.530
by the browser.

62
03:29.530 --> 03:32.140
But maybe we want our own custom error message.

63
03:32.140 --> 03:33.460
We don't like the browser's one.

64
03:33.490 --> 03:34.660
How do we do it?

65
03:34.810 --> 03:38.710
Well, let us now code up some JavaScript.

66
03:38.710 --> 03:40.690
It's not a text input anymore, is it?

67
03:40.720 --> 03:44.410
Let's just define our variable as an emailInput.

68
03:44.830 --> 03:47.280
Let's just delete everything else, remove all the noise.

69
03:47.290 --> 03:49.840
So here we are, we've got our email input element.

70
03:49.840 --> 03:57.220
What we can do now is we can add an event listener, we can grab our emailInput, access the

71
03:57.220 --> 03:58.390
addEventListener() method.

72
03:58.420 --> 04:01.930
The event we want to listen for is an input event.

73
04:02.550 --> 04:08.040
So every time the user types a character, when that happens, what do we want to do?

74
04:08.430 --> 04:11.580
Well, we want to execute a callback function.

75
04:11.670 --> 04:14.490
Sorry, I've got one too many brackets there.

76
04:14.640 --> 04:16.180
And we need a bracket outside here.

77
04:16.200 --> 04:16.680
There we go.

78
04:16.680 --> 04:18.840
And what do we want to happen in our callback function?

79
04:18.840 --> 04:27.900
Well, we want to say if, right, on this email input the typeMismatch is set to true, then we know that

80
04:27.900 --> 04:28.950
there's a problem, right?

81
04:28.950 --> 04:35.880
Because in the background, when we specify the type of email, we know that there's a regular expression

82
04:35.880 --> 04:41.970
built by the browser in this case, and we know when that's not met that the typeMismatch property and

83
04:41.970 --> 04:43.620
remember where that property is located?

84
04:43.620 --> 04:44.250
That's right,

85
04:44.250 --> 04:51.120
it's located on the validityState object. When that is set to true, we know there's an error and therefore

86
04:51.120 --> 04:53.190
we want to display our own custom error message.

87
04:53.190 --> 04:59.520
If it's false, we can just set that custom validity method to an empty string and therefore the browser

88
04:59.520 --> 05:01.200
will let it submit to a server.

89
05:01.200 --> 05:04.270
So, if on this email input,

90
05:04.930 --> 05:08.110
we access its validity state object. On there, 

91
05:08.110 --> 05:10.510
remember there was a typeMismatch property.

92
05:10.900 --> 05:15.220
If that is set to true, then we want what?

93
05:15.250 --> 05:15.790
That's right.

94
05:15.790 --> 05:18.730
We want to access that setCustomValidity() method, don't we?

95
05:18.730 --> 05:19.930
So let's access it.

96
05:20.350 --> 05:28.090
We access our email input and on here we've got the setCustomValidity() method and we can just say I

97
05:28.120 --> 05:32.710
am expecting a real email address please.

98
05:33.040 --> 05:34.270
Okay, so there we go.

99
05:34.300 --> 05:35.620
We've literally done it.

100
05:35.620 --> 05:41.440
And if you know JavaScript, once that IF is met, we've also got an ELSE statement, right?

101
05:41.440 --> 05:48.970
Because if the email validity type mismatch is set to false, then we want this ELSE to be executed.

102
05:48.970 --> 05:51.010
And what do we want to happen here?

103
05:51.010 --> 05:53.860
Well, of course, we want

104
05:54.490 --> 05:59.080
to set this setCustomValidity() message to an empty string.

105
06:00.140 --> 06:04.670
And that's why I showed you the previous example, right, where we had to set it to an empty string

106
06:04.700 --> 06:05.780
for it to be valid.

107
06:05.810 --> 06:08.630
So now if the user types random text, we click submit.

108
06:08.870 --> 06:11.060
There is our own custom error message.

109
06:11.060 --> 06:12.200
How awesome.

110
06:12.500 --> 06:18.830
But of course if the user types a valid email address and now click submit, we are all good to go.

111
06:18.980 --> 06:20.150
Does that make sense?

112
06:20.180 --> 06:22.520
I don't want you to get lost in all the detail.

113
06:23.030 --> 06:27.740
All we did was we added our own event listener on that email input.

114
06:27.770 --> 06:30.300
The event we're listening for is an input event.

115
06:30.320 --> 06:33.740
Every time that fires, we execute this

116
06:33.770 --> 06:35.490
IF/ELSE statement.

117
06:35.510 --> 06:37.280
I can actually prove to you what's happening.

118
06:37.280 --> 06:41.570
Maybe this will help if you're a bit unclear, but what we can do is every time that input event is

119
06:41.570 --> 06:44.530
fired, why don't we console log to the console

120
06:44.540 --> 06:48.560
this emailInput "validity" state object.

121
06:49.930 --> 06:51.730
Right, let's console log that out.

122
06:53.440 --> 06:54.490
Let's go to the browser.

123
06:55.840 --> 06:56.950
Open the console.

124
06:59.210 --> 06:59.510
Right.

125
06:59.510 --> 07:01.970
Let's just type the letter "a". Here 

126
07:01.970 --> 07:03.050
we've got the ValidityState.

127
07:03.050 --> 07:10.040
If we open that up, we've got this typeMismatch property and the typeMismatch is currently set to

128
07:10.070 --> 07:10.550
true.

129
07:10.550 --> 07:15.890
And it's set to true because we've given this input a type of email and because it's a type of email,

130
07:15.890 --> 07:21.170
there is a regex, it has to be in proper format. Once it is in proper format,

131
07:21.200 --> 07:26.420
"a@a", if we open this up now that typeMismatch is set to false.

132
07:26.420 --> 07:32.150
And because it's set to false, we do want the user to be able to submit the form and there we go.

133
07:32.180 --> 07:33.440
The user can do so.

134
07:33.470 --> 07:34.520
How awesome.

135
07:34.520 --> 07:35.810
I hope it's making sense.

136
07:35.810 --> 07:40.280
I hope you've paid attention because in the next lecture I want to give you a challenge and I want to

137
07:40.280 --> 07:42.620
see if you can figure out how to do it.

138
07:42.620 --> 07:45.350
Super excited and I'll see you in the next lecture.