Form Validation

[00:00:00]
>> All right, in a little bit, I'm gonna leave you to do this one. But let's talk a little bit about form validation. And then we'll do an exercise, we can kinda fill that one in and do a little bit additional form validation, as well. So if we go to this form, and we hit Sign In, we get that helpful chrome A little pop up that says, please fill out this required field.

[00:00:22]
And because it's also type email, if you say just like, it's like, nah, right? But that's like Chrome. So like, how do you that's not on the DOM? So like, how do you test that? There's actually a bunch of ways. And or if there was an error that came back from your server, you might also like the user already exists, and where on the sign up page, invalid password, you might want to check all of these different things.

[00:00:52]
But those are just like looking for the DOM element on the page there, right? This is like literally a thing that Chrome is making or Firefox is making or what have you. And we wanna figure out how we might test that. So let's play around with it for a second.

[00:01:08]
And we'll go through. All right. So we've got, we wanna require an email And so what could we say here? Let's go ahead, and the way that I got that if you saw, was I clicked on the sign-in button without an email in there, right? So in order to get us into that situation, that part's pretty straightforward What we might do in this case is let's go ahead and grab that button grab that sign in button right there, sign in submit.

[00:01:49]
That's a good name for a button. And so we'll say so as submit. Start there. So now we'll say so get at Submit. Click on it. Set this one to only for a second. Right, that was not, Should be the only one wanting to have another only in place.

[00:02:25]
Yep. If you have to that have only, All right cool, Let's sign up Couldn't find that on there. The issue is I went to the signup page and look for the Sign In button my test works. Not what I thought. But let's go ahead and we'll change out to sign up in this case.

[00:02:59]
All right, cool. We're back. So we see that now we want to test it that like we didn't move to a page, I guess we could test that the location didn't change, I guess. That's not really testing the right thing I want to test that that thing happened.

[00:03:14]
I want a test that said that this form was invalid and ideally what the actual issue was in this case. So cool we've got the the situation made, but now we need to verify the things are Not working in the way that we're expecting them to not work.

[00:03:34]
Alright, so what we could do is we could go ahead and get that in that email field. I'll tell you why I'm not going to make this an alias in a second. So we'll go ahead and we'll get that and if there is one of those pop ups It turns out that this element has a pseudo class just in the browser, that will work as a selector.

[00:03:59]
So we could say invalid. And this is effectively what we're trying to do is exactly what was brought up with the filters as the question of making sure that there is at least I mean this will probably work right, that there is one that is called invalid so we have one hits the selector you could theoretically if there were two that weren't filled in, you could say that has a length of two like we saw before we want to make sure that something rendered on the page, but right now, we're saying that there should be at least one of this one element that has the pseudo selector invalid, right?

[00:04:34]
But that's not really good enough cuz we saw, we're gonna have two different kinds of invalidation methods. We could have, you didn't give me anything and we also had and you didn't give me an email, right? And so we need to figure out how to get a little bit better.

[00:04:48]
Just saying that it wasn't valid is true. But like, why wasn't it valid, right? And so we could go ahead and we can either look for just the raw element or because it isn't valid in this case, and this is where we could get rid of this one, right because yeah, like this, it will not find an invalid one.

[00:05:06]
Unless for whatever we do next, unless there's something already matches then it will just give up after this. So we'll also say, invoke. And jquery has prop, which is kind of like value, but we'll get some property of it. And we're gonna look for validation message, right? And that, Should contain, What was it, please fill out this field?

[00:05:43]
Cool. Right, and you can see that the test passes. Again, that doesn't stay there forever, but it found it within that four second window, which is right after we hit submit and so we now know that that will show up, right? There is one other way that you could check for this.

[00:06:02]
It's that the field also has a validity prop, which we can take a look at actually, let's go ahead and open up the developer tools. No more biggerize my font for a second here, and let's go ahead and we'll just hit sign up. Please fill out this field.

[00:06:27]
I don't know if I missed it if I got it in time, but this will have a UI so you can see the validation message and validity gives me this JavaScript object that gives me all of kind of as booleans. Like what the problems are, all right? So I think it went away at this photo value missing is true, right?

[00:06:51]
So this is how it failed the validation. So in this case, we could go ahead and get the proper validity, and then we're going to use it, it's property that we saw before. And so grab this, all this, pop that right in and we could say it's value missing.

[00:07:18]
That should, Be true. All right, so that's a few ways that you can do it.