I told you, it's not that difficult
right.
I hope it's becoming more intuitive.
But let's move on, because these aren't the only properties available to us by the Constraint Validation
API.
We have others.
For example, we've also got this willValidate property and this willValidate property is basically
just telling us if the element concerned, if the form control concerned, will be validated when the
form is submitted.
In other words, it's just a property that's telling us whether or not an input can be validated.
It's true
if it can be validated, and false if it's not. When would this apply?
Well, one time that the willValidate is going to be false, is if the input element is disabled.
Remember, we looked at these before.
When it's disabled, it's not going to be validated when submitted to the server.
Does that make sense?
So we've really largely looked at certain properties on the Constraint Validation API, but I want to
move on now.
I want to look at ... not properties, but I want to look at some methods available to us.
Methods, by the way, are like a function.
It's something that is done, it's a doing word, it's like a verb, whereas properties are more like
a noun.
The first method I want to discuss is this checkValidity() method that just returns true if the element's
value has no validity problems. And of course it's going to return false
otherwise. If the element is invalid, this method is also going to fire an invalid event on the element
itself.
We've also got other methods.
We've also got this setCustomValidity() method.
And the argument it takes is just the message.
It allows you to specify a custom error message to the element.
How awesome is this?
And because it's so awesome, I want to discuss it just a little bit more.
I want to discuss it more because using this method - the setCustomValidity() method - is one of the most
common use cases of the Constraint Validation API.
And like I mentioned, it just lets you use JavaScript to define a validation failure and a custom error
message. Because let's face it, automated browser error messages have their drawbacks.
They're not very easy to understand
sometimes, they don't tell you enough information.
It's much nicer to set our own.
And yes, you guessed it ...
let's hop over to the text editor and let's look at an example of using the setCustomValidity() method.
I can't wait. See you now.