We are not quite done. There
is something else that I really need to mention, and that is the valid and invalid pseudo classes.
Specifically, this styling controls based on whether their data is valid or not.
What's really cool is that form controls with constraint limitations can be targeted based on their
valid or invalid states.
And when you think or hear the word states, ding, ding, ding ðŸ””, you got to think of pseudo classes,
and the pseudo classes relevant to forms are valid and invalid. In the case of numerical data,
by the way, we can also talk about :in-range and :out-of-range data.
But anyway, I want to keep it to the :valid and :invalid pseudo classes in this lecture.
As I mentioned, form controls with constraint limitations can be targeted based on these two states,
valid and invalid.
And just remember, I want to be clear, this does not remove the need to perform validation on server
side. Even though far fewer invalid form requests are to be expected,
invalid ones can still be sent by non-compliant browsers, for instance browsers without HTML5 and without
JavaScript or even by bad people trying to trick your web app.
So don't think that just adding some simple front end constraints is enough to protect data.
It's not.
But anyway, what else can I say about the valid and invalid?
Well, firstly, controls with no constraint
validation will always be valid.
So if you go and target that class and you don't have any constraint validation, then the styling will
always apply to that widget because it will always be valid.
Make sense.
Makes sense.
Next, controls with the required attributes set on them and that have no value are counted as invalid.
In other words, they will be matched with the invalid and the required pseudo class.
And what about some of the form controls that have patterns associated with them?
Things like input where its type attribute is set to email.
Or, what about where type is URL?
Well, in those instances the controls with built in validation are invalid when the data entered into
them does not match the pattern specified. And finally controls whose current value is outside the range
limit specified by min and max attributes, are invalid, but they're also going to be matched by out
of range.
What?
What is this out of range?
What is that all about?
Don't worry.
We're going to be talking about that shortly.
For now, I want to stop here and I want to go back to our cool signup form.
And I want us to now target the :valid and :invalid pseudo classes in order to improve upon it.
I can't wait.
I'll see you now.