All right, all right, All right.
Now I want to talk about this setCustomValidity() method.
It is such an important method that I want to look at a few examples.
And this is the example we looked at previously.
We just had a text type of input.
That's all we had.
And why don't we just see how this setCustomValidity() works on this?
So right now let's remove required, so there's no constraint or built-in validation.
And now what I want to do is I want to access this method. So we access our text input. On here,
we can access the Constraint Validation API directly.
We don't have to do anything special, but this time I want to access that method.
The method is called setCustomValidity(). And I want you to notice something
when I start doing this right. I'm going to type our error saying this is an error
that never stops.
And if we save this and we go to our form, if now the user tries to submit, we are going to get an
error because this is basically telling the browser that this text input field is now in error state
and that we want to show an error message.
And of course it never stops, right?
The user is not able to ever submit this form.
So this is an important aspect of using this method.
When you use it, it's going to make this input or whatever element you're using or putting it on,
it's going to make it invalid. And I can prove it to you. Within here,
why don't we style up the :invalid pseudo class?
Let's grab our input, style up the :invalid state, and we can just give it a red border - border, 1 pixel
solid red.
And now you can see that the default state is invalid because we've set this custom validity error message.
We basically telling the browser this is now invalid.
"So then, Clyde, how do we make it not invalid?"
Well, if you set the value to an empty string,
it's valid again.
So if now we access our textInput variable again, which is that input element itself, we can access
the setCustomValidity() method again, but this time just set it to an empty string.
If we do this, save it is now valid.
We don't have that error anymore.
The user can now type and submit.
Okay, Clyde, I get it.
I get it.
But how do we actually use this in a practical sense?
Well, why don't we look at an example right now?
We'll change this input of type text to an input of type email.
And if there's an error in the format of that email, why don't we display our own custom error message?
How awesome.
This is going to be so much fun.
See if you can give it a go.
So pause the video, see if you can give it a go and then let's code it up together.
Did you give it a go?
I hope so.
But if not, don't worry.
Let's do it now.
Together.
The first thing I want to do is I want to remove this input of type text.
Okay.
And we want to replace this input with input of type email.
That's all we want to do.
We can give it a name of "mail", we can give it an ID of "mail".
And because we're giving it an ID of mail, why don't we specify a label here of mail and we can say,
please give me a valid
email address.
Right.
Very, very simple.
So now we've got an email, but if the user tries to submit just random text, we get this error message
by the browser.
But maybe we want our own custom error message.
We don't like the browser's one.
How do we do it?
Well, let us now code up some JavaScript.
It's not a text input anymore, is it?
Let's just define our variable as an emailInput.
Let's just delete everything else, remove all the noise.
So here we are, we've got our email input element.
What we can do now is we can add an event listener, we can grab our emailInput, access the
addEventListener() method.
The event we want to listen for is an input event.
So every time the user types a character, when that happens, what do we want to do?
Well, we want to execute a callback function.
Sorry, I've got one too many brackets there.
And we need a bracket outside here.
There we go.
And what do we want to happen in our callback function?
Well, we want to say if, right, on this email input the typeMismatch is set to true, then we know that
there's a problem, right?
Because in the background, when we specify the type of email, we know that there's a regular expression
built by the browser in this case, and we know when that's not met that the typeMismatch property and
remember where that property is located?
That's right,
it's located on the validityState object. When that is set to true, we know there's an error and therefore
we want to display our own custom error message.
If it's false, we can just set that custom validity method to an empty string and therefore the browser
will let it submit to a server.
So, if on this email input,
we access its validity state object. On there,
remember there was a typeMismatch property.
If that is set to true, then we want what?
That's right.
We want to access that setCustomValidity() method, don't we?
So let's access it.
We access our email input and on here we've got the setCustomValidity() method and we can just say I
am expecting a real email address please.
Okay, so there we go.
We've literally done it.
And if you know JavaScript, once that IF is met, we've also got an ELSE statement, right?
Because if the email validity type mismatch is set to false, then we want this ELSE to be executed.
And what do we want to happen here?
Well, of course, we want
to set this setCustomValidity() message to an empty string.
And that's why I showed you the previous example, right, where we had to set it to an empty string
for it to be valid.
So now if the user types random text, we click submit.
There is our own custom error message.
How awesome.
But of course if the user types a valid email address and now click submit, we are all good to go.
Does that make sense?
I don't want you to get lost in all the detail.
All we did was we added our own event listener on that email input.
The event we're listening for is an input event.
Every time that fires, we execute this
IF/ELSE statement.
I can actually prove to you what's happening.
Maybe this will help if you're a bit unclear, but what we can do is every time that input event is
fired, why don't we console log to the console
this emailInput "validity" state object.
Right, let's console log that out.
Let's go to the browser.
Open the console.
Right.
Let's just type the letter "a". Here
we've got the ValidityState.
If we open that up, we've got this typeMismatch property and the typeMismatch is currently set to
true.
And it's set to true because we've given this input a type of email and because it's a type of email,
there is a regex, it has to be in proper format. Once it is in proper format,
"a@a", if we open this up now that typeMismatch is set to false.
And because it's set to false, we do want the user to be able to submit the form and there we go.
The user can do so.
How awesome.
I hope it's making sense.
I hope you've paid attention because in the next lecture I want to give you a challenge and I want to
see if you can figure out how to do it.
Super excited and I'll see you in the next lecture.