Stop Using :invalid and :valid Pseudo-Classes. Use THIS Instead!

Here's something I bet you didn't know about validating input fields using CSS. I'm sure that you're familiar with valid and invalid CSS classes that allow you to style input fields based on the fact if the input field fails to validate or not. Most often, the fields that fail to validate or designated with red and fields that validate successfully are designated with green. Before I show you a better way to highlight invalid and valid input fields, let me just tell you that on your input fields, you're going to have required attribute if the field is required and correct type. So, in this example of this field, we have a type email and the attribute required is present. So, this is going to be important if you want CSS to correctly pick up the fields that you want to highlight as valid or invalid. I will enable valid field and it sets to light green and likewise, I will enable invalid class. It sets to light coral because I have a dark mode on my personal website. That's where I want a little bit lighter versions of green and red. So, now the fields are properly highlighted, but the problem is I didn't interact with those fields, so I don't actually want to highlight this as invalid or this as valid. Let me show you exactly the pattern that I've seen today. So, what happens is you start typing and immediately field highlights as green successful or red invalid. And I definitely don't want this because at the moment I start typing the email, I'm still not done with my input, so it's not a good experience if I immediately get a feedback that field is red, something is not right. Instead, I want the field to highlight red or green after I'm finished with my work, after I'm finished entering my email. And let me tell you there's a very easy and straightforward way to handle this in CSS. Instead of input valid and input invalid, you want to use pseudo classes user valid and user invalid. So, I will just change this to user-valid and user-invalid. So, what happens here is now the field will not be marked either as valid or invalid before user interacts with it. I'll just focus my email field here and I'll start typing. You can clearly see that as I'm typing the field is not marked as valid or invalid. It's still in the state of user is entering something, so I'm not going to do anything here, but as soon as I move to a different field, then this input field will be marked appropriately. In this case, email is valid, so this CSS is applied. Or alternatively, if I wouldn't enter proper email here, then the field would be marked as invalid. So, let me just delete this part here and you'll see exactly that this CSS is applied. By the way, if you're wondering why the name field is highlighted as invalid, I've interacted with it a little bit earlier in the video, so that is why it is highlighted red. It wouldn't be otherwise. So, if I enter something, it will be highlighted green exactly as it should be. So, this is just a quick tip that I wanted to share with you. Instead of valid and invalid pseudo classes, use user-valid and user-invalid pseudo classes. Thank you so much for your attention. My name is Rem Number. I will see and hear you in a different valid form field. Or rather, in the next video.