WEBVTT

0
00:30.080 --> 00:31.430
I told you, it's not that difficult

1
00:31.430 --> 00:31.850
right. 

2
00:31.880 --> 00:33.680
I hope it's becoming more intuitive.

3
00:33.710 --> 00:38.810
But let's move on, because these aren't the only properties available to us by the Constraint Validation

4
00:38.810 --> 00:39.260
API.

5
00:39.290 --> 00:40.550
We have others.

6
00:40.670 --> 00:46.850
For example, we've also got this willValidate property and this willValidate property is basically

7
00:46.850 --> 00:53.330
just telling us if the element concerned, if the form control concerned, will be validated when the

8
00:53.330 --> 00:54.800
form is submitted.

9
00:54.800 --> 01:00.100
In other words, it's just a property that's telling us whether or not an input can be validated.

10
01:00.110 --> 01:00.980
It's true

11
01:00.980 --> 01:04.760
if it can be validated, and false if it's not. When would this apply?

12
01:04.760 --> 01:10.370
Well, one time that the willValidate is going to be false, is if the input element is disabled.

13
01:10.520 --> 01:11.780
Remember, we looked at these before.

14
01:11.780 --> 01:15.590
When it's disabled, it's not going to be validated when submitted to the server.

15
01:15.620 --> 01:16.640
Does that make sense?

16
01:16.640 --> 01:22.280
So we've really largely looked at certain properties on the Constraint Validation API, but I want to

17
01:22.280 --> 01:23.050
move on now.

18
01:23.060 --> 01:27.500
I want to look at ... not properties, but I want to look at some methods available to us.

19
01:27.500 --> 01:29.730
Methods, by the way, are like a function.

20
01:29.730 --> 01:34.920
It's something that is done, it's a doing word, it's like a verb, whereas properties are more like

21
01:34.920 --> 01:35.430
a noun.

22
01:35.460 --> 01:40.950
The first method I want to discuss is this checkValidity() method that just returns true if the element's

23
01:40.950 --> 01:45.840
value has no validity problems. And of course it's going to return false

24
01:45.840 --> 01:53.070
otherwise. If the element is invalid, this method is also going to fire an invalid event on the element

25
01:53.070 --> 01:53.670
itself.

26
01:53.670 --> 01:54.810
We've also got other methods.

27
01:54.810 --> 01:58.020
We've also got this setCustomValidity() method.

28
01:58.020 --> 02:00.600
And the argument it takes is just the message.

29
02:00.600 --> 02:04.380
It allows you to specify a custom error message to the element.

30
02:04.410 --> 02:06.080
How awesome is this?

31
02:06.090 --> 02:09.960
And because it's so awesome, I want to discuss it just a little bit more.

32
02:10.320 --> 02:16.290
I want to discuss it more because using this method - the setCustomValidity() method - is one of the most

33
02:16.290 --> 02:21.330
common use cases of the Constraint Validation API.

34
02:21.510 --> 02:27.450
And like I mentioned, it just lets you use JavaScript to define a validation failure and a custom error

35
02:27.450 --> 02:33.150
message. Because let's face it, automated browser error messages have their drawbacks.

36
02:33.180 --> 02:35.070
They're not very easy to understand

37
02:35.070 --> 02:37.260
sometimes, they don't tell you enough information.

38
02:37.260 --> 02:39.240
It's much nicer to set our own.

39
02:39.240 --> 02:41.160
And yes, you guessed it ...

40
02:41.190 --> 02:48.480
let's hop over to the text editor and let's look at an example of using the setCustomValidity() method.

41
02:48.480 --> 02:49.770
I can't wait. See you now.