A simple update for better form UX

The only issue here is browser support, which is good, but not great yet. You can use input:not(:placeholder-shown):valid for excellent browser support, and a very similar result though!

[KevinPowell]

The only issue here is browser support, which is good, but not great yet. You can use for excellent browser support, and a very similar result though!

[crim-son]

I just imagine the amount of JavaScript it would have required to achieve this... Awesome stuff 🎉

[TheHeroIsRisingUp]

This man is a legend. I remember 3 years ago when I was just starting to code, his tutorials were a life changer.

[netstormuk]

I am onto the stage of learning about front end js form validation with constraints api and this had me annoyed at seeing the red outlines by default - and this fixes that issue. Thank you.

[krishna.vineet]

Your shorts as a work break are enhancing my front-end ❤

[boredomindex]

This couldn't have come at a better time. Thank you so much, Kevin 🙏

[ネメシス-hz]

Great CSS tip! Then you can also do :is(input:user-invalid) + message { } to display a message if it is invalid.

[Thebiggestgordon]

‼️‼️careful when using colours to give users information, as not everyone can see them! Consider also adding some graphic feedback like a tick/cross, or text to the side that says ok/not ok.

[scnix]

this is really powerful with :has() For example:
.form-group .error { display: none; }
.error { display: block; }

[hikari]

I was gonna say this is awesome no longer having to finagle with js to make these when he mentioned browser support and was about to get sad. But then I checked caniuse and it says 86%! So now I'm hapoy again!

[redvinstone]

Wow! That’s amazing 🤩 thanks for the tip

[JaredKC]

Yes!!! I used this right away. Thanks.

[VinceM]

One huge drawback for the way it’s done is just changing the colour of the outline. This affects accessibility. What if the user has a form of colour blindness and can’t distinguish or see the outline change colour. A better way is to add an icon as well as changing colour.

[roye]

Really cool. I wonder why they didn't use the industry standard term "dirty" though, the selector could've been :dirty:invalid

[Philippe-coder]

this is a very powerful property thanks for sharing it

[Loveday-mten]

You can't imagine how much js I used for something similar. I'm so using this for simple forms. I'll stick to writing my own regex for broader use cases though

[sk]

Can't we use JS classList to add or remove class name for specific id's when interacted or length> 0

[carlosduran]

I see a really great browser support (87% for both selectors).

[daveturnbull]

You got any plans for a full video on the subject of form design Kevin?

[ahooton]

The validation doesn't trigger when using form autofill. It only works when explicitly typing into the input field. Is there a fix for this? 🤔