I'm excited about this lecture because in this lecture we're going to be moving away from HTML5
builtin validation to JavaScript validation, and by JavaScript validation I just mean using JavaScript
to validate your form.
And let me be clear you must use JavaScript if you want to take control over the look and feel of native
error messages or to deal with legacy browsers that do not support HTML's built-in form validation.
And if you don't know what JavaScript is, or how it works or where it comes from, then please check
out my JavaScript Complete Grandmaster Course.
But don't worry, it is going to be quite simple in this lecture.
So even if you don't know how JavaScript works, you should be able to follow along.
Okay.
So how does this work?
Well, with forms, it's common to use JavaScript with the Constraint Validation API.
What?
Don't worry, this is provided to you by the browser.
Most browsers today support the Constraint Validation API.
You can view it as a set of methods and properties that are given to us automatically by the browser,
and there are many different web APIs available to us by the browser, like the Fetch API when we're
dealing with AJAX.
What about Web Sockets API, what about the DOM, etc etc.
So this Constraint Validation API is just one of many.
All right.
Well, how can we use this Constraint Validation API?
Well, we limited in its use on a few form element DOM interfaces.
So what I mean by this is that we can only use the Constraint API on the following interfaces, and each
interface represents a different element.
For example, the HTMLButtonElement interface of course represents the button element and so on and
so forth.
It's pretty intuitive.
So what's really cool, my dear students, is that when we're dealing with these elements, with the
input element, for example, we have access to the Constraint Validation API automatically.
We don't have to do anything to access it.
"Okay
Clyde okay, so we've got access to the Constraint Validation API, but what does that mean in a practical
sense?
What does it give us?"
Well, it gives us certain properties and methods automatically.
For example, we can access the validationMessage property.
What is that?
Well, it's a read-only property that returns a validity message.
In other words, it's going to return the error message describing the validation constraints that the
control doesn't satisfy.
If the element's value does satisfy all of its constraints, aka it's valid, then this is just going
to return an empty string.
We've also got this validity object.
This is a really useful one, and this returns a validity state object that contains several properties
describing the validity state of the actual element.
What kind of properties can we access?
Well, we can access the patternMismatch property that returns true if the value does not match the
specified pattern attribute.
And it's going to match false if it does match.
And remember, right, if the value doesn't match the pattern attribute, we also going to match the
invalid CSS pseudo class.
So a lot of these are going to be working in tandem.
So let me say that again - this pattern mismatch will return true if the value does not match the specified
pattern attribute.
We're going to get this patternMismatch error and the form will be prevented from being submitted to
a server.
But at the same time, because the pattern is not being matched, we know that the invalid CSS pseudo
class is also at play.
It's quite interesting.
Another property of this validity object is this tooLong property that returns true if the value is
longer than the maximum length specified by the maxlength attribute?
Again, if it's true, the element's also going to match the invalid CSS pseudo class. Very similarly
to tooShort,
that's going to return true if the value is shorter than the minimum length specified by the minlength
attribute. And rangeOverflow, rangeUnderflow,
they are very similar.
They're going to return true if the value is greater than the maximum value specified by the max attribute.
Or of course if we're dealing with range underflow, it's going to return true if the value is less
than the minimum specified by the min attribute.
But what's interesting now with rangeOverflow and rangeUnderflow error messages is that we're going
to have a few pseudo classes that are matched.
Can you guess which ones?
Well, yes, the invalid pseudo class is going to apply, but now we've also got the out-of-range pseudo
classes that are going to apply.
Quite interesting.
Right?
Another property on this validity object is this typeMismatch property or error message.
This is going to return true if the value is not in the required syntax.
For example, if we have an input where its type attribute is set to email or URL, and the user doesn't
type in the correct format.
If this is valid, if it returns true, we know that the invalid CSS pseudo class is also going to apply.
And then we've got this
"valid" property that returns true if the element meets all of its validation constraints and is therefore
considered to be valid.
So when this valid is true, we know that the valid CSS pseudo class is also going to apply.
And last but not least, what happens when we have this required attribute on an element?
Well, in that case we've got this valueMissing property and that is going to return true if the element
has a required attribute, but no value has been specified.
Whew.
I know, I know.
This is a ton, right?
It's very, very useful.
But you know me - actions speak louder than words, so why don't I quickly go to the console,
let's look at a quick example.
Let me access this validityState object and show you its properties.
Hopefully then it will become more intuitive to you.
Let's have a look.
So here we are, a very, very simple example.
I've just wrapped an input where its type is set to text in a form. And of course we've got a button
of type submit, which is the default by the way.
So we don't even need that.
And of course right now the user can type anything and submit anything.
There's no validation constraints.
But I want to show you how this Constraint Validation API works.
Remember that it only applies to certain interfaces and one of those interfaces it applies to was the
HTMLInputElement interface, which gives us access to this API on the input element directly.
So how does it work?
Well, remember the two types of client side validation?
We had the built-in validation, which is just HTML5, but we've also got the second type and that
is using JavaScript.
And in order to use JavaScript we need to write everything within these script tags.
From here, what do we do?
Well, we need to grab that input element, don't we, in order to access the Constraint Validation
API.
So how do we grab that input?
Well, let's define it in a variable called text, and let's start by accessing our document object.
On here,
we can getElementsByTagName(),
the tag name we want to get is input.
Right.
And this returns a collection if you've done my DOM course.
So we access the first item in the collection, which is that input element itself.
And what's really cool, what's really cool is we've pretty much done it.
You know what,
instead of calling it text, let me call it textInput, because that's what it is.
And what we can do now is we can access this Constraint Validation API directly.
We don't have to do anything else.
It's really, really cool.
So we can grab our textInput.
And what are some of the properties I spoke about?
Well, the one that is very important to us is the validity object, very, very important to us.
And in order to see it, why don't we just console log this to the screen.
That's all we have to do.
Go to the browser, inspect this document.
Let's go to the console.
And here is this validityState object.
How awesome is this, my dear students.
(sound effect: Yeah) Very, very cool
right?
And these are some of the error messages or properties that are shown within this validityState object,
right.
I spoke about some of these ... tooLong, tooShort, typeMismatch.
It's valid property is set to true now because it doesn't have the required attributes on it.
Why don't we put the required attribute on it?
Let's get into our input,
and post the required attribute on here.
Now we've got this validityState object again, but now it's valid property is set to false.
It's not true anymore.
And of course we've also got this valueMissing property and remember that returns true if the element
has a required attribute, but no value.
That's so much fun, isn't it?
This is all I want to show you for now.
I just wanted to show you how to actually physically see this validityState object.
Right now, we still been discussing only the properties of the Constraint Validation API.
There's just another one I want to mention to you, and then I want to move on to some important methods.
So let's jump back into the lecture.