Form Validation Style

[00:00:00]
>> Steve Kinney: So we've got some of the basic styling of an input field. Now the interesting part is, and we're gonna look at the list in a second, there are like, if a button has some variants like hover and active, input fields have a lot. Right. Required. What type are they?

[00:00:17]
Are they valid or invalid? Are they focused? We'll talk about focus and focus visible, right, how those are different. Putting together the basic input field, not that hard, right? All of the things that we can do within this input field, now that we have it, I think become a little bit more interesting.

[00:00:38]
So let's kind of explore some of those. What we're gonna do is just kinda look at the overall list of things that we can do and kind of figure out how to begin exploring that. So we'll explore a bunch of these. But once we get our heads around a few of these, it becomes a little bit more obvious what some of the other ones do, right?

[00:01:04]
Like if you understand invalid and valid, then like styling based on autofill becomes a little bit more like obvious and stuff along those lines or optional or whatever. Like, I have never styled something based only on it being optional. I've always gone based on it being required. So some of these exist cuz these just map to CSS pseudo classes, right?

[00:01:28]
None of this is a Tailwind-specific thing, it's CSS. But then instead of having to do a whole nother class name with that pseudo selector and override stuff and end up with a stack of CSS things that becomes very long. You can go horizontally and end up with a class list on an HTML tag that's very long.

[00:01:47]
But these are just on input fields. Some of the ones that we have available to us required valid invalid. This is an interesting one. If you've ever played around with valid and invalid, they're kind of problematic because let's say it's a required field and the form loads and it's empty, it's immediately invalid.

[00:02:12]
So you're like, I'm gonna show a red ring of despair. They haven't even typed into it yet and you're already yelling at them. That's why we have user valid and user invalid, which checks of validity after the user's interaction with the element, right? Yeah.
>> Speaker 2: So is that just a touch or is that like a key press?

[00:02:37]
Or is that like.
>> Steve Kinney: I think if it gets focused and then unfocused is my understanding, right? And a lot of these, like, I've styled for invalid more Than I've styled for valid. I've styled for out of range more than I've. You know, I tend to add the sadness for the bad states, but I guess theoretically, if you want to put a green ring of happy, that's good too.

[00:03:00]
Cool. So there are a bunch of these that we can kind of begin to play around with. We can even. Let's look at a few of them right now together. So if we wanted to, we could. Yay, I got my back the way I wanted it to. Like I said before, we could do something like invalid, sure, love it, outline red 600, great.

[00:03:22]
It's not invalid yet because in this case, this one is not required. We can either go to the required one or change the markup. This feels better. Well, I'll make this one required for a minute and you can see that in this case it's immediately invalid because it's required and there's nothing in it so that we don't like.

[00:03:43]
So instead we change this one to user invalid. Now they click, they leave, or not sure if it's acquired ones. But we go to the email one, we'll definitely see it. Let's do email input.
>> Steve Kinney: Right, they leave, but by default having no email address in there was not problematic.

[00:04:16]
It was only if they have a. It's not immediately invalid. Because the other thing you'll see with the email if we switch this to just invalid that real quick. No, I don't need to save an HTML page. We'll see. Don't embarrass me.
>> Speaker 3: Is that markup for the email using just like the type of control email?

[00:04:45]
>> Steve Kinney: Yeah, that's all like I'm not doing. There's no. There's effectively no JavaScript in here right now. The fight that's happening right now is I guess between invalid and focus. Who wins? In this case, focus is winning. So we'll get rid of that for one second just to.

[00:05:03]
So it just said invalid. Right. I get that. So let's put everything back the way we had it. So now we'll have. But if they leave, I mean, that's.
>> Speaker 3: I mean, that's much better than in Angular where you're typing huge NG if statements that are this long.

[00:05:22]
>> Steve Kinney: Yeah.
>> Speaker 3: Why you don't need to. All you need is that class or.
>> Steve Kinney: The number of times before user invalid existed. Yeah, Whether it's like some amount of state in React where it's like, okay, if it's not the default value, but it's also not valid, then go add this other class.

[00:05:37]
I don't wanna do that anymore, right? Like a shocking number of things. Like, the other one is like accordions that you probably in either your favorite front end framework choice used to open and close in JavaScript, you can just do in CSS now, right? And especially when we get to some of the more advanced CSS properties like has or the helpers that come with Tailwind.

[00:05:57]
You can do like, hey, if they've hovered over the group, they've hovered over the card. I wanna change like a bunch of stuff in the card as well, right? I want the links to all of a sudden get underlines. You can do all that in Tailwind with a few characters.

[00:06:11]
We'll take a look at it, don't worry.