As always, I'm going to Visual Studio Code.
I just love it ♥♥.
It's easy to use.
So here we are, a blank index.html file.
All I want to do is create a very, very simple form.
Okay.
Nothing crazy.
We don't need an action.
We're not submitting this to the server.
All I want to show you is the novalidate attribute in action.
So let's just say, for example, we're wanting a user to insert an even number.
How would we do that?
Well, firstly, let's use the input control, but its type now is not "text".
Normally we set type to "text" or type to "email".
Here we want the user to write in a number, specifically an even number.
Let's just call it number.
We don't need an ID because we're not wanting to style it or link it to a label.
There's an attribute called "step", on the input widget that the browser will display when you click the
up or down arrow, because it's a number input type, it's going to incrementally or decrement-ally...
if that's a word, go in steps of 2.
So that's all that that's saying.
Um, and then of course we want a button of type "submit" because I want you to see this validation logic
in action.
Right, so here's submit.
Let's open up the Live Server.
Let's go to the browser.
Here we go.
Insert an even number.
Okay, so here are the up arrows ⬆ and down arrows ⬇.
Remember I just said, and it's going up in even numbers.
But if the user submits 1, which we know is not an even number and we click submit, we get validation
logic...
applying! The browser won't let us submit - "please enter a valid value.
The two nearest values, valid values, are 0 and 2."
How cool is that?
If we type a 9, try and submit the browser again will tell us that the nearest valid values are
8 and 10.
And this is what I meant by the fact that browsers automatically validate inputs.
We didn't have to turn anything on, did we?
No. But sometimes, like I mentioned, you want to turn it off. To turn it off,
it's super easy.
If we go back to our form here, and on the form itself, we can just include this boolean attribute. And...
this is why we don't need to give it a value.
We can just have it there.
It's either there or it's not.
Go back to the browser.
Now let's try and insert the number 9.
Submit (yahoo) and it has allowed us to do so.
You can see there in the GET request, in the URL, we've got the "number", our variable name, and that's
assigned the value of 9.
So there we go.
Is that starting to make sense?
I hope so.
But now I know I just mentioned a few minutes ago that, you know, this attribute can be placed on
the form, or a per-widget basis.
And although it's true, it's kind of a half truth.
And I'll show you why.
Because if we go back to our code, we cannot take this novalidate attribute, and place it on this input
element...
for example. If we save this, go to our browser, insert 1, try and submit, we're going to be
stopped from doing so.
In other words, that novalidate is not working when we place it on the form control itself.
Whaaat? Weird,
right.
Well then why did I say you can put it on a per-control basis?
Well, you can in a very limited number of cases.
So firstly it's not called novalidate.
Well, what is it called?
Let's get rid of it here.
And let me just write a comment here.
You can insert a attribute called, I think it's called, formnovalidate...
but only on 3 widgets, and they are buttons, input with type of submit...
and I think it's input with image.
Whew, I know.
So there's that comment.
You can insert an attribute called "formnovalidate".
So not just "novalidate", but only on three widgets.
Okay.
So it's kind of limited, but it is possible.
So for now, when we want to use novalidate, we throw it on the form itself.
That's how it's supposed to look.
Okay, enough said.
I think this attribute is pretty straightforward.
Let's move on.