WEBVTT 0 00:01.890 --> 00:08.370 Welcome to yet another attribute, and this attribute is called the "Novalidate" attribute. And... 1 00:08.400 --> 00:11.430 yup, it's just another form attribute. 2 00:12.030 --> 00:18.120 The first thing I want to mention here is that usually forms naturally validate. 3 00:18.420 --> 00:22.800 And this just means that no special attributes are required to turn this on. 4 00:23.310 --> 00:24.660 That's the first thing I want to mention. 5 00:24.660 --> 00:26.030 We've kind of seen it before, right? 6 00:26.040 --> 00:31.380 If we have an input of type "email", the user then, or the browser, restricts the user having to type in 7 00:31.380 --> 00:32.580 that @ symbol... 8 00:32.610 --> 00:37.650 and we need a period for like a ".com" or a ".url", whatever that is. 9 00:38.010 --> 00:41.740 So that's just an example of us seeing the validation in action. 10 00:41.760 --> 00:45.570 So we've seen that we didn't have to turn anything on. It just happened. 11 00:46.080 --> 00:48.930 OK, well, what is the novalidate attribute and how does it work? 12 00:49.560 --> 00:50.640 It's very, very simple. 13 00:50.640 --> 00:55.730 It's just a special attribute to turn off the browsers validation rules. 14 00:55.980 --> 01:01.440 And what I mean by this is that the novalidate attribute prevents forms from running the validation 15 01:01.440 --> 01:03.940 logic when the user submits the form. 16 01:04.080 --> 01:10.740 In other words, it always lets the form submission process go through, regardless of what the results... 17 01:10.740 --> 01:13.450 of validation logic would normally allow. 18 01:13.470 --> 01:15.450 And it's just a boolean value (true or false). 19 01:15.840 --> 01:19.500 And these attributes are quite cool because they either there, or they are not. 20 01:19.500 --> 01:21.680 You don't have to assign it a special value. 21 01:21.930 --> 01:27.120 For example, you could just type "novalidate" or you could give it an empty string. 22 01:27.360 --> 01:32.240 In both those instances, it's telling you the novalidate attribute is there, or it's on. 23 01:32.670 --> 01:37.020 And as I just mentioned, this means the browser will stop form validation. 24 01:37.170 --> 01:38.340 Pretty straightforward. 25 01:39.850 --> 01:45.640 Did you know, you can use the novalidate attribute on the form itself, which is what we are discussing 26 01:45.640 --> 01:50.520 here, or you can use it on a per-widget or per-control basis. 27 01:51.040 --> 01:52.930 So it's a pretty useful attribute. 28 01:52.930 --> 02:00.850 But you may be thinking, "I understand the novalidate, but why would I ever want to use it? It doesn't make 29 02:00.850 --> 02:01.600 sense 😵." 30 02:01.840 --> 02:07.570 As it turns out, there are some very useful scenarios in which you would want this novalidate... 31 02:07.570 --> 02:08.800 attribute to be present. 32 02:08.920 --> 02:09.950 I've used it... 33 02:09.950 --> 02:12.010 tons. Here are some examples. 34 02:12.100 --> 02:18.650 #1, one main use of this attribute is to allow a user to be able to save their progress. 35 02:18.700 --> 02:21.340 What about if we're going through some questionnaire, for example? 36 02:21.340 --> 02:26.800 This attribute will allow you to disable your forms validation laws, let the user submit the form 37 02:26.800 --> 02:31.600 and continue on later without having to force them to validate everything first. 38 02:32.320 --> 02:33.360 So that's one scenario 39 02:33.420 --> 02:34.000 where it's useful. 40 02:34.420 --> 02:42.760 Number #2, you might want to use this attribute if you are doing your own client side validation, basically, 41 02:42.760 --> 02:49.450 if you want to create your own validation bubbles and JavaScript warnings and confirmations. If you... 42 02:49.450 --> 02:53.590 want to know more about bubbling, and all these kind of things, please check out my DOM courses. 43 02:53.770 --> 02:56.180 So that's the second reason why you might want this attribute. 44 02:56.200 --> 03:03.040 The third one is kind of, you know, if you want to go balls to the wall with your own server-side validation, 45 03:03.220 --> 03:08.590 which, let's face it, we need to kind of do anyway, regardless of whether your browser does a first 46 03:08.590 --> 03:09.510 attempt at it. 47 03:09.760 --> 03:10.330 There we go. 48 03:10.330 --> 03:12.550 That's the novalidate attribute. 49 03:12.700 --> 03:13.600 Pretty straightforward. 50 03:13.600 --> 03:14.320 Pretty simple. 51 03:14.560 --> 03:19.720 Let me just hop over to Visual Studio Code and show you a super quick example.