Welcome back.
I'm super, super excited.
As you will recall in the previous lecture, we discussed that there were two types of client side validation.
Do you remember what they were?
The first was built-in form validation and the second type was JavaScript validation.
We're going to be looking at JavaScript shortly, but before we do, I just want to discuss built-in
form validation in a little bit more detail.
So let's get into it.
One of the most important or the most significant features of HTML5 form controls is the ability to
validate most user data without relying on JavaScript.
And how is this done?
Well, it's done by using validation attributes on various form elements.
We've seen a lot of examples of this in the course, but to recap, here are some of them.
The required attribute specifies whether a form field needs to be filled in before the form can be submitted
to a server.
We've also got minlength and maxlength.
Quite intuitively,
they specify the minimum and maximum length of textual data strings.
We've got min and max.
What's that about?
Very intuitively,
it specifies the minimum and maximum values of numerical input types, like the type of number, for
example.
And then we've got this type attribute.
This type attribute was amazing, wasn't it?
Because that specifies whether the data needs to be a number, email address, or some other specific preset
type. And we can get more complex with built-in client side validation.
We can use the pattern attribute.
We're going to see an example shortly, but this specifies a regular expression that defines a pattern
the entered data needs to follow. Whew, I know. And these are only a few of them that we've looked at.
We have looked at more.
And these attributes are important because if the data entered in a form field, follows all of the rules
specified by these attributes, it's going to be considered valid and the browser will allow the user
to submit the form to the server.
Is it making sense?
So, when an element is valid, the following things are going to happen.
Firstly, the element is going to match the :valid CSS pseudo class, which lets you apply a specific
style to valid elements.
We've seen many examples of us using this in the course.
And the second thing that's going to happen when an element is valid, is that the browser will submit
the form when the user tries to send the data, of course, provided there's nothing else stopping the
form from doing so, like when you use JavaScript for example.
So that's when an element is valid. Well,
Clyde, what happens when an element is invalid?
I know this might sound obvious, but I like to recap.
It's going to solidify everything we've learnt. Similarly to the valid state,
when an element is invalid, two things are going to happen.
Firstly, the element is going to match the :invalid CSS pseudo class and sometimes it's going to match
other UI pseudo classes as well, for example out-of-range.
And this all depends on the type of error.
The beauty of having this :invalid pseudo class of course, is that you can apply a specific style to
elements that are invalid.
The second thing that's going to happen is that if the user tries to send the data, the browser is
going to block the form from submitting and the browser will display a native error message.
Very, very useful.
Before I move on, I just want you to know that there are several errors that will prevent the form
from being submitted. And we're going to be looking at some of these shortly, especially when we look
at using JavaScript.
But anyway, we've got different types of errors like badInput, tooShort, typeMismatch, valueMissing,
stepMismatch, rangeUnderflow,
etc
etc.
There are a whole lot of different errors associated with different types of inputs, and when those
errors occur, the browser will not submit the form.
All right.
So that's what happens when an element matches the invalid state.
But one of the most common and we've seen this tons in the course is what?
That's right,
it's this required attribute.
And when we have this required attribute on a form element, it's going to match the :required pseudo
class.
What does this mean?
Well, it means if that form control has a value that's empty, an error message is going to be displayed
when the user tries to submit the form.
And of course, we know that the :invalid pseudo class is also going to match.
But ... enough
speaking.
I want to jump over to the text editor.
Let's code up an input of type text.
Let's target the :required pseudo class, the :invalid pseudo class and the :valid pseudo class.
You'll see how easy it is and then we can continue on with this lecture.
So let's quickly do that now.