Welcome to yet another attribute, and this attribute is called the "Novalidate" attribute. And...
yup, it's just another form attribute.
The first thing I want to mention here is that usually forms naturally validate.
And this just means that no special attributes are required to turn this on.
That's the first thing I want to mention.
We've kind of seen it before, right?
If we have an input of type "email", the user then, or the browser, restricts the user having to type in
that @ symbol...
and we need a period for like a ".com" or a ".url", whatever that is.
So that's just an example of us seeing the validation in action.
So we've seen that we didn't have to turn anything on. It just happened.
OK, well, what is the novalidate attribute and how does it work?
It's very, very simple.
It's just a special attribute to turn off the browsers validation rules.
And what I mean by this is that the novalidate attribute prevents forms from running the validation
logic when the user submits the form.
In other words, it always lets the form submission process go through, regardless of what the results...
of validation logic would normally allow.
And it's just a boolean value (true or false).
And these attributes are quite cool because they either there, or they are not.
You don't have to assign it a special value.
For example, you could just type "novalidate" or you could give it an empty string.
In both those instances, it's telling you the novalidate attribute is there, or it's on.
And as I just mentioned, this means the browser will stop form validation.
Pretty straightforward.
Did you know, you can use the novalidate attribute on the form itself, which is what we are discussing
here, or you can use it on a per-widget or per-control basis.
So it's a pretty useful attribute.
But you may be thinking, "I understand the novalidate, but why would I ever want to use it? It doesn't make
sense ðŸ˜µ."
As it turns out, there are some very useful scenarios in which you would want this novalidate...
attribute to be present.
I've used it...
tons. Here are some examples.
#1, one main use of this attribute is to allow a user to be able to save their progress.
What about if we're going through some questionnaire, for example?
This attribute will allow you to disable your forms validation laws, let the user submit the form
and continue on later without having to force them to validate everything first.
So that's one scenario
where it's useful.
Number #2, you might want to use this attribute if you are doing your own client side validation, basically,
if you want to create your own validation bubbles and JavaScript warnings and confirmations. If you...
want to know more about bubbling, and all these kind of things, please check out my DOM courses.
So that's the second reason why you might want this attribute.
The third one is kind of, you know, if you want to go balls to the wall with your own server-side validation,
which, let's face it, we need to kind of do anyway, regardless of whether your browser does a first
attempt at it.
There we go.
That's the novalidate attribute.
Pretty straightforward.
Pretty simple.
Let me just hop over to Visual Studio Code and show you a super quick example.