I now want to talk about the input of type tel.
And as you guessed it, the type tel input is used for entering telephone numbers.
And because this is one of the newer types, if browsers do not support the tel attribute, it's going
to fall back to the standard text input type.
Okay.
But most browsers today all know and accept the tel type, so I wouldn't even worry about that.
"We'll Clyde, how useful is this type of tel?"
Well, remember when we were discussing type of email, I mentioned that in terms of logic, it doesn't
complete the process for us.
The user can still type an invalid email. And it's very similar when it comes to the tel type.
We know that internationally phone numbers take on very different formats for both technical and localization
reasons, and due to this, the tel input does not attempt to validate the format of a phone number.
It would be very difficult for it to do so, right?
But no fear, because we can make use of the pattern attribute, or we can even use the setCustomValidity()
JavaScript method to enforce a format if required.
In terms of that JavaScript method - setCustomValidity() -
we're going to be looking at that later on in the course.
So why don't I quickly show you an example of using the pattern attribute once again, but this time
with the tel type.
Let's have a look.
As always, a blank Visual Studio Code file is open, and all I want to do is I want to add an input,
but this time with type tel.
Let's give it a name of tel.
Let's give it an ID of tel.
Let's look at the browser.
There we go.
It just looks like an input of type text, right?
I can even type text in there.
What do I want to do now?
Well, I want us to add some logic.
Remember what I just said, that browsers don't
implement any validation logic.
So why don't we do it again with the pattern attribute.
And let's say, for example ... well before the pattern, let's add a placeholder and let's say we want
our format to be something like this.
One, two, three.
Four, five, six, seven, eight, nine.
Okay.
Just giving you an example.
Say we wanted the number to be in that format.
We know the browser won't do anything to help us enforce that rule.
So we have to create our own rule.
And what do we do when it comes to creating rules, when we're dealing with strings and numbers?
That's right.
We can use regex. And we do that by using the pattern attribute.
We enclose it within speech tags, and here we can define our own pattern.
Firstly, the user has to type numbers - any number between 0 and 9, but we only want three of them.
We're going to limit it to three numbers at a time.
Then we have a dash.
And we literally repeat this three times ... 0 to 9 and we are only requiring three numbers again, and 0 to 9.
Three numbers again.
How awesome is that?
Very, very easy.
Very, very intuitive.
Now, if the user wants to submit "asdf", the browser will not let the user do so.
You know what,
let me wrap this in a form, and then I'll actually show you.
Uh, let's take this input.
And put it all inside the form.
And the other thing I want to do is I want to have a button here of type submit.
Refresh the page, and let's try and submit an empty field.
Oh, we haven't put the required attribute on here.
Required.
Okay.
Submit the field.
It won't let us do so.
Okay.
Because we have that required attribute, that makes sense.
If we try and just do letters, it's not going to let us do it.
Please match the requested format.
Okay.
And the requested format of course is 123-456-789.
We can even do our own custom error message.
And you already know this.
We use the title attribute, "custom error message".
Sorry, I need to refresh.
Let's try and submit this.
There is our custom error message.
How cool is that?
But if we type 123-456-789, and we try and submit
this ...
it will work.
So that's just a quick, quick example to show you (a) how we can use input of type tel and (b) how we
can use regex to really specify the formatting that we require on our web app.
Let's jump back into the lecture.
There you go.
I hope it's becoming more intuitive and we've already seen this attribute used on the password type.
We've seen it used on the search type or on the email type, I should add.
And now we've seen it used on the tel type.
Pretty cool, right?
And don't take all this information for granted.
You really, really have come a long way.
Anyway, something else I want to mention with the tel type is that it's pretty limited in terms of usefulness
on a desktop, right?
Its real benefit comes when you're using a phone or tablet because numbers pop up on the screen rather
than characters.
And over and above this, the device's autocomplete mechanisms often kick in and suggest phone numbers
that can autofill with a single tap.
And that's it, folks.
That's the input where its type is set to tel.
Can you now "tell" that I'm ready for the next lecture? ðŸ˜‚