Welcome to this very cool challenge where I want you to try and use this Constraint Validation API all
by yourself.
And I'll be honest with you, I don't expect you to get this correct, but just give it a go.
Try and get as far as you can go.
What do I want you to do?
What is the challenge?
Well, let me just zoom in slightly.
I just want to create a text input field where the user has to enter the username, but the username
has to have at least one lowercase, and one uppercase letter. If the user just tries to submit it as is
without typing anything.
I want a custom error message.
"Silly billy,
you have not typed anything."
If the user now starts typing just lowercase letters and tries to submit.
We get another custom error message.
How awesome.
But of course, when the user now has a capital letter in there and click submit, the browser allows
it to go through.
Very simple example.
You know what?
Let me just give you one hint, and that one hint is going to be the regular expression that I used,
aka the value of the pattern attribute.
Let me show you what it looks like.
So there you go.
I want you to use that value in the pattern attribute.
Let me just quickly explain it to you.
Firstly, we got the brackets, the two brackets, which are two sets of groups.
Okay.
We start off each group with a question mark and equal sign.
This is just known in RegEx as a positive lookahead.
All I'm trying to achieve here is I'm trying to say we can either type lowercase and then uppercase
or we can type uppercase and then lowercase - the order doesn't necessarily matter.
The next thing you'll notice there is we've got this full stop.
The full stop matches any single character. And we've got an asterix - the asterix matches the preceding
character zero or more times.
And then we've got the square brackets, which we've already seen in this course many times with the
characters A-Z.
Basically it's just allowing a range of lowercase characters between A and Z.
So all I'm trying to say in that first group is that the user can type as many characters as they want
between A and Z.
And then I finish off this entire pattern by a quantifier.
I have those curly braces, which is basically telling the regex to match the preceding groups at least
one times and at most 50 times.
That's all that that means.
So that is my regex.
That's the pattern I used.
Feel free to just copy that, paste it, and then try and figure out how I did this solution.
I'll give you a hint ... on that input type
I'm going to be listening for the invalid event.
Remember I mentioned that that type of mismatch property will fire an invalid event when whatever is
entered does not match the pattern field.
So that's why I'm listening for an invalid event.
When that invalid event fires, of course I want to check whether the value is nothing because when
it's nothing I just want that error message
"Silly
billy, you have not typed anything". Remember. If I try and submit now I want that error message.
So we've got to check whether the actual value is an empty string.
If it is an empty string, but we're still getting that invalid error,
we know then that they haven't provided at least one uppercase and one lowercase letter.
For example
we know that this is going to happen, and we need to tell them that they need one uppercase and one lowercase!
Whew.
I know, there's a lot to take in.
Give it a go, see how far you can go and I'll see you in the solution video.