Now that we explored buttons
in greater detail, let's come back to the form itself
and let's talk about validation.
Validation is that part where I, for example,
enter an invalid email address
into a field of type email as this field is.
And then I get a warning when I tried to submit this.
The browser shows me this warning
that this is not a valid email address.
And we very often wanna add validation like this
to ensure that only valid forms can be sent to a server.
Now as you see here for some inputs,
like for example, the inputs of type email,
we get some validation out of the box.
We could override that by going to the form element
and adding novalidate as a attribute here.
By the way, here, you don't even need to assign a value,
you can just add the attribute without a value
because this acts as a so-called Boolean value,
which basically just means that in this case,
for this kind of attribute,
the existence of this attribute is enough
to already change to behavior of the element
on which you add it.
It needs no extra value to then configure this attribute.
Here, it's just about whether this attribute is there
or not there.
And if it is there, if it is placed on a form element,
then you disable this built-in browser validation.
So here now with novalidate added on the form,
if I enter an invalid email address again,
you'll notice that now if I click submit,
this works and this is submitted
because I disabled this built-in validation.
And sometimes that is also what you want.
For example, because maybe,
you also write your own JavaScript code
to bring your own validation logic.
Something we can't do yet, but something we can do
with JavaScript, which we are going to explore
a little bit later in the course.
But here, I definitely want to use that built-in validation,
so I will remove that novalidate attribute from the form.
And now, instead, I wanna show you other kinds
of built-in validation, which we can add to our elements
and which we can leverage.
We've got the built in validation for the email,
but what about the name?
Here, for this name, we have no validation.
And indeed, any names should be allowed here.
We definitely don't wanna restrict that,
but I definitely do want to ensure
that something is entered here,
that this field is not submitted in an empty state.
And I can ensure this by adding yet another attribute here,
which you can add to any input element,
and that's the required attribute.
Just like novalidate, that is a Boolean attribute,
which means it's pure existence is enough.
And if that attribute is added,
then this field on which you added it
is required and must not be empty.
So if I save this now with required added
on that username input, if I now try to submit this form
without entering anything here,
then you see I get this warning
that I should fill something into this field.
So that's some nice built-in validation which we can get.
Now we can leverage that new knowledge also
on the password field.
This should also be required.
But in case of the password,
it also should not just be required,
it may be should also have a minimum length,
which we wanna ensure so that the password
must be at least, let's say seven characters long.
For this, we get another attribute, which we can add.
The minlength attribute.
And you also have a maxlength attribute
in case you want the opposite.
So here at one minlength, and then here we do need a value
because we need to set that minimum length,
which we want to get.
So we could set this to seven, for example,
to expect at least seven characters as a password.
But you can use any length you want any number you want.
So if I save this now, if I submit this form
without entering anything,
I get this warning regarding the name.
Now if I do enter a name here,
then I get a warning regarding the password.
Now, if I do enter something here, which is not long enough,
I get that our warning that I need seven characters
or more.
So you see, that this warning even picks up the length,
which we specified in our minlength attribute,
the seven here, so that's very handy.
And of course, if I do enter a password that is long enough,
then I can submit this without issues.
Now, we also might want to add required here,
to this email address here.
And with that, we definitely improved this form
by enforcing certain rules here.
But that's not all I wanna do.
Here for the age, we also might want some validation.
Here, we also might want to require that field
so that it's not empty.
And we also might want to enforce a minimum age,
maybe one, maybe 18, whatever makes sense
for the website of you're building.
And here, let's say we wanna enforce the age of at least 18.
For this, we can go to this age field,
and first of all, make it required
so that it must not be empty.
But then, here we can use the min attribute.
Not minlength because minlength controls the amount
of characters that has to be added,
but min, which sets the minimum value,
which has to be entered in this input field.
And there also is max in case you wanna restrict
the maximum value.
And here, we could say the minimum value should be 18
and the maximum value should maybe be 100.
And I know that you can get older than 100,
it is just an example here.
If we add min and max like this to the age field,
then you will notice that here,
if I don't fill in anything into this age field,
but I do fill in something into the our fields here,
then you will notice that if I try to submit this,
I get the warning that I need to fill in some value
into the age field.
Now, if I enter one year, which of course,
is smaller than 18, then I get the warning
that the value must be greater than or equal to 18.
If I enter 101, you already might guess it.
I get the warning that I must have a value smaller than 100
or equal to 100.
So if I enter a valid age then, I can submit this again.
And that is how we can add validation.
Now, it's a bit more special if we talk about the birth date
because here, we also can require this field
and we also can set a min and max value,
but here, min is not a number, but instead a date.
And a date expressed in a certain format,
which should look like this.
This would say that the min date is first January, 1921.
We can also set a max date
and set that, let's say, to 2003-01-01.
And if I set that, then you will also notice
that the date picker actually picks up
that max and min date.
The highest value I can pick in a date picker now
is January 1st, 2003 because that's my max value here.
And also, my min value is restricted.
Here, I can't go back more than to 1921.
So to date picker respects that.
And if I would try to enter something invalid here,
then of course, I would also get an error,
though I need to fill in those other fields first.
So let me quickly do that.
And now if I submit this,
I get this warning regarding the date.
So that's how you can set min and max.
When working with a date, you need to set a date
in this kind of format for the min and max attributes.
Now, you can also use these validation attributes
on radio buttons, for example.
You can require radio buttons.
For that, I add required on all three radio buttons.
And if I do that, it does not mean
that all three radio buttons have to be checked,
that would be impossible,
but it means that at least one of them has to be checked.
So if I don't check any of these buttons,
but I do fill out the other fields with valid dates,
let me quickly do that, then you see,
I get a warning regarding those radio buttons.
But as soon as I select at least one of them,
I can submit the form again.
And that's how these validation attributes work.