WEBVTT

0
00:00.350 --> 00:03.770
I now want to talk about the input of type tel.

1
00:03.920 --> 00:08.920
And as you guessed it, the type tel input is used for entering telephone numbers.

2
00:08.930 --> 00:15.050
And because this is one of the newer types, if browsers do not support the tel attribute, it's going

3
00:15.050 --> 00:18.040
to fall back to the standard text input type.

4
00:18.080 --> 00:18.270
Okay.

5
00:18.290 --> 00:24.230
But most browsers today all know and accept the tel type, so I wouldn't even worry about that.

6
00:24.260 --> 00:27.590
"We'll Clyde, how useful is this type of tel?"

7
00:27.620 --> 00:35.330
Well, remember when we were discussing type of email, I mentioned that in terms of logic, it doesn't

8
00:35.330 --> 00:36.590
complete the process for us.

9
00:36.590 --> 00:43.010
The user can still type an invalid email. And it's very similar when it comes to the tel type.

10
00:43.040 --> 00:50.360
We know that internationally phone numbers take on very different formats for both technical and localization

11
00:50.360 --> 00:57.880
reasons, and due to this, the tel input does not attempt to validate the format of a phone number.

12
00:57.890 --> 01:00.690
It would be very difficult for it to do so, right?

13
01:01.290 --> 01:09.270
But no fear, because we can make use of the pattern attribute, or we can even use the setCustomValidity()

14
01:09.300 --> 01:13.140
JavaScript method to enforce a format if required.

15
01:13.140 --> 01:16.800
In terms of that JavaScript method - setCustomValidity() - 

16
01:16.830 --> 01:19.830
we're going to be looking at that later on in the course.

17
01:19.830 --> 01:26.160
So why don't I quickly show you an example of using the pattern attribute once again, but this time

18
01:26.160 --> 01:28.110
with the tel type.

19
01:28.140 --> 01:29.130
Let's have a look.

20
01:29.820 --> 01:36.060
As always, a blank Visual Studio Code file is open, and all I want to do is I want to add an input,

21
01:36.060 --> 01:38.610
but this time with type tel.

22
01:39.300 --> 01:40.910
Let's give it a name of tel.

23
01:40.920 --> 01:43.380
Let's give it an ID of tel.

24
01:43.410 --> 01:44.520
Let's look at the browser.

25
01:44.970 --> 01:45.530
There we go.

26
01:45.540 --> 01:48.720
It just looks like an input of type text, right?

27
01:48.720 --> 01:50.580
I can even type text in there.

28
01:52.310 --> 01:53.270
What do I want to do now?

29
01:53.270 --> 01:56.420
Well, I want us to add some logic.

30
01:56.450 --> 01:59.130
Remember what I just said, that browsers don't

31
01:59.150 --> 02:02.330
implement any validation logic.

32
02:02.450 --> 02:05.030
So why don't we do it again with the pattern attribute. 

33
02:05.030 --> 02:12.710
And let's say, for example ... well before the pattern, let's add a placeholder and let's say we want

34
02:12.710 --> 02:14.510
our format to be something like this.

35
02:14.510 --> 02:15.770
One, two, three.

36
02:16.530 --> 02:18.890
Four, five, six, seven, eight, nine.

37
02:18.900 --> 02:19.300
Okay.

38
02:19.320 --> 02:20.430
Just giving you an example.

39
02:20.430 --> 02:23.280
Say we wanted the number to be in that format.

40
02:23.310 --> 02:27.630
We know the browser won't do anything to help us enforce that rule.

41
02:27.630 --> 02:29.610
So we have to create our own rule.

42
02:29.610 --> 02:35.400
And what do we do when it comes to creating rules, when we're dealing with strings and numbers?

43
02:35.970 --> 02:36.600
That's right.

44
02:36.600 --> 02:40.980
We can use regex. And we do that by using the pattern attribute.

45
02:41.070 --> 02:45.570
We enclose it within speech tags, and here we can define our own pattern.

46
02:45.570 --> 02:53.100
Firstly, the user has to type numbers - any number between 0 and 9, but we only want three of them.

47
02:53.100 --> 02:55.530
We're going to limit it to three numbers at a time.

48
02:55.650 --> 02:56.980
Then we have a dash.

49
02:57.900 --> 03:07.650
And we literally repeat this three times ... 0 to 9 and we are only requiring three numbers again, and 0 to 9.

50
03:08.600 --> 03:09.770
Three numbers again.

51
03:10.040 --> 03:11.720
How awesome is that?

52
03:11.750 --> 03:12.620
Very, very easy.

53
03:12.620 --> 03:13.510
Very, very intuitive.

54
03:13.520 --> 03:18.530
Now, if the user wants to submit "asdf", the browser will not let the user do so.

55
03:18.560 --> 03:19.130
You know what,

56
03:19.130 --> 03:22.850
let me wrap this in a form, and then I'll actually show you.

57
03:24.780 --> 03:26.580
Uh, let's take this input.

58
03:28.360 --> 03:30.070
And put it all inside the form.

59
03:30.070 --> 03:35.710
And the other thing I want to do is I want to have a button here of type submit.

60
03:36.620 --> 03:39.890
Refresh the page, and let's try and submit an empty field.

61
03:40.900 --> 03:43.360
Oh, we haven't put the required attribute on here.

62
03:43.390 --> 03:44.180
Required.

63
03:44.270 --> 03:44.800
Okay.

64
03:44.830 --> 03:46.180
Submit the field.

65
03:46.210 --> 03:47.410
It won't let us do so.

66
03:47.440 --> 03:47.740
Okay.

67
03:47.740 --> 03:50.340
Because we have that required attribute, that makes sense.

68
03:50.350 --> 03:53.290
If we try and just do letters, it's not going to let us do it.

69
03:53.290 --> 03:55.030
Please match the requested format.

70
03:55.030 --> 03:55.570
Okay.

71
03:55.570 --> 03:59.830
And the requested format of course is 123-456-789. 

72
03:59.860 --> 04:03.190
We can even do our own custom error message.

73
04:03.190 --> 04:04.390
And you already know this.

74
04:04.420 --> 04:09.100
We use the title attribute, "custom error message".

75
04:10.210 --> 04:11.800
Sorry, I need to refresh.

76
04:12.040 --> 04:13.810
Let's try and submit this.

77
04:13.960 --> 04:16.450
There is our custom error message.

78
04:16.690 --> 04:17.950
How cool is that?

79
04:17.950 --> 04:24.100
But if we type 123-456-789, and we try and submit

80
04:24.100 --> 04:24.760
this ...

81
04:25.590 --> 04:26.980
it will work.

82
04:27.000 --> 04:34.020
So that's just a quick, quick example to show you (a) how we can use input of type tel and (b) how we

83
04:34.020 --> 04:40.030
can use regex to really specify the formatting that we require on our web app.

84
04:40.050 --> 04:41.880
Let's jump back into the lecture.

85
04:42.420 --> 04:42.890
There you go.

86
04:42.900 --> 04:49.050
I hope it's becoming more intuitive and we've already seen this attribute used on the password type.

87
04:49.050 --> 04:53.640
We've seen it used on the search type or on the email type, I should add.

88
04:53.670 --> 04:55.830
And now we've seen it used on the tel type.

89
04:55.830 --> 04:56.970
Pretty cool, right?

90
04:56.970 --> 04:59.040
And don't take all this information for granted.

91
04:59.040 --> 05:01.200
You really, really have come a long way.

92
05:01.410 --> 05:07.200
Anyway, something else I want to mention with the tel type is that it's pretty limited in terms of usefulness

93
05:07.200 --> 05:09.180
on a desktop, right?

94
05:09.210 --> 05:16.800
Its real benefit comes when you're using a phone or tablet because numbers pop up on the screen rather

95
05:16.800 --> 05:17.760
than characters.

96
05:17.790 --> 05:24.300
And over and above this, the device's autocomplete mechanisms often kick in and suggest phone numbers

97
05:24.300 --> 05:27.390
that can autofill with a single tap.

98
05:27.390 --> 05:28.470
And that's it, folks.

99
05:28.470 --> 05:31.950
That's the input where its type is set to tel.

100
05:31.980 --> 05:35.790
Can you now "tell" that I'm ready for the next lecture? 😂