There you go.
I told you it wasn't that bad, was it?
But now I want to get into a bit more complex built-in validation.
I want to now look at the pattern attribute.
And this pattern attribute is another very useful validation feature.
And what does it expect?
That's right.
It expects a regular expression as its value.
What is a regular expression?
A regular expression or regex is just a pattern that can be used to match character combinations in
text strings.
What?
What exactly is regex?
Well, it is a very complicated topic and it's beyond the scope of this course for me to get into too
much detail.
But just bear in mind that every browser vendor has their own regex engine -
a regular expression piece of software that is able to process regular expressions. And all a regular
expression is trying to do, is its trying to match a pattern to a given string.
"So Clyde, what is this regular expression engine called?"
Well, it does depend on what browser you're using.
So when we're looking at Chrome, Chrome uses the V8 engine
when it executes JavaScript, and the developers put so much effort into that, they kind of ignored building
their own custom code for regular expressions.
Well, that was until a few years ago.
So now Google Chrome uses their own regex engine called Irregexp.
Another thing I want to mention to you is that not all input types with a certain pattern, need to have
the pattern attribute specified.
For example, we've seen the input where its type is set to email.
In that case we don't have to write custom pattern regex.
We can if we want to, but we don't have to.
Why don't we have to?
Well, because the browser does it on our behalf.
When we use input of type email, the browser already uses a well-formed email pattern.
So anyway, I just wanted to mention that before I move on.
Let's get back into it.
As I mentioned, regex's are quite complex, so I don't intend to teach you them exhaustively in this course.
But I just want to give you a few examples here below to give you a basic idea of how they work.
Okay.
So what are some patterns we can specify?
Well, here I'll just 3 very simple examples.
If we just have the character "x", well that's going to match one character that is "x". Not "b".
Not "xx". Just "x".
If we specify a pattern "xy", that's going to match "x" followed by "y".
And then of course, regex has their own syntax.
We can use that line ( | ) to specify OR, so we can say x | y, and that's going to match one character that
is "x" or "y".
And there are many, many more possibilities and examples that I can't cover here.
But the above are just a few simple examples to get you started.
And while we are on this topic, why don't we hop back to that example we did earlier, and why did we
put our own pattern attribute in there
just to see how it works with our invalid and valid pseudo classes?
Let's have a look.
We are back at our original example and here we are asking the user if they would prefer a banana
or a cherry.
So I don't want the user to be able to write nothing and submit that. Right now, they can submit that.
So how can we do that?
Well, as soon as you start thinking about a pattern
ding ding ding ðŸ”” ...
we can think of regular expressions.
So here we want to limit the user writing cherry or banana, right?
Those are the only things we want the user to be able to do.
So why don't we do that. And let's get rid of the gradient.
I just want to remove some noise.
Let's just have the invalid and the valid pseudo class here.
How can we do it?
Well, okay.
Firstly, let me just make this a bit bigger.
The first thing we can do of course, is add this pattern attribute to our input of type text.
That's all it takes. And we know the value of this pattern attribute is a regular expression.
So we could do this.
We could say, well, the regular expression has to be banana or cherry.
We could do this, save it, go to our browser, we can type here "nothing" and we can see that it's still
got the invalid styling applied to it,
right.
Let's remove the outline.
Save.
Let's start typing "grass".
We've still got the invalid class here.
Let's type "cherry".
We've still got the invalid class.
Why is that?
Oh, it's because,
sorry, I put a space here, didn't I?
Let's just remove the space.
We don't want a space.
Save it.
If we type cherry,
there we go.
It's green.
If the user types banana, it's green.
And they are allowed to submit.
But there's a problem with this in the sense that the user could do a capital B - Banana - and it's not
going to work.
So with regex, you've got to be very explicit.
And what we could define here at the beginning before just defining a small "b", is a character set. And
a character set is just defined in regex with the square brackets.
It's basically an alternative for that straight line, OR
right,
so we could say, well, what characters are allowed, either a small "b" or a big "B".
And then of course we don't want another "b", and then we can do the same with the "c".
So we define a character set,
the user can type either a small "c" or a big "C".
Now if we save this and the user types Cherry with a capital C, it is going to be valid.
How awesome is this?
It's easy, right?
This is not difficult code at all.
We've just included the pattern attribute.
We've now implemented our own client side built in validation.
Whoo!
This stuff is fun, isn't it?
So well done.
I've had a lot of lot of fun in this lecture,
looking at built-in validation.
Remember, there are two types of validation, inbuilt and JavaScript.
We've looked at the most common inbuilt validation types in this lecture.
But now why don't we start jumping into a bit of JavaScript?
Why don't we look at how JavaScript validation works.
See you in the next lecture.