Form validation most of the time is done with Native HTML (Using the type attribute) or with JavaScript. And if you want to add fancy effects when the user has done a mistake, you most probably would choose JavaScript, but lemme change that for you.

Hi! My name is Codedgar and today, I'm going to present you 3 CSS selectors that will change the way you look at form and input validation with native HTML! Let's get to it!

During the development of the Input Forms for Puppertino, my own CSS framework, I came across a problem, I wanted to have native validation inputs, but creating a JS would be more work, not only for me but for people who would like to use the framework. So I investigated and found these lovely CSS Selectors.

Using "type" attribute.

By now you might be familiar with the "type" attribute in input elements, this helps the browser to know if the user has inserted valid information on the input and/or limit the type of information the user can insert (i.e Number Inputs).

The problem with these is that if you want to add a certain styles when the input is invalid or valid you would have to create a JS for that... Or do you?

This is something I would have loved to know before, so without further do, let's meet these 3 CSS selectors!

Introducing the :invalid Selector

The invalid selector, is a very powerful one, the styles in it will be applied to an invalid input, allowing you to add styles like another border-color or background to the element that has an invalid input based on attributes like "type", "max", "maxlength", "pattern" and so on. And it's used like so:

"Ok Edgar but that's just a tiny tiny bit of validation, what else do you got?" Glad you asked! Let's meet our other friend, the :valid selector!

The :valid Selector

The valid selector works as you would expect, if the input meets the criteria of the attributes, it will apply the styles of it. Simple right? And you can use it like so:

"Nice Edgar" I hear you say "But now my input is either red or green, how do I fix that?" And that's because if the input is empty, it doesn't technically meet the criteria of the attribute, but fear not! Let's open the doors for our last selector, the :placeholder-shown!

The :placeholder-shown Selector

Last but not least, the :placeholder-shown Selector it's going to help us to maintain a neutral style if the input is empty, but keep in mind, this selector works only when, as the name implies, the placeholder is shown, so if there's no placeholder, the input will get the styles of the :invalid selector. Remember that! And the placeholder selector is as easy as:

OK now that we have this:

And it looks like this:

Want to play with this? Check it out in Codepen

Beautiful. Now, let's talk about the pros and cons of using this and compatibility!

The compatibility

Great enough, the compatibility is pretty strong and all the modern browser support it without any type of problems! Check this amazing capture of CanIUse:

Pros

Using these selector implies no use of JS, so you can forget of adding and deleting classes after parsing the text of the input (Which I used to do).

Once, I created an app which validated the inputs on keypress (It was 4 years ago don't judge me haha), but this meant that you would have to press a key and delete it to validate the inputs, and this was particularly annoying when you where going to login, because if you had the information saved, it would throw an error, so everybody used to tell me how awful that was. But with this, you are free of that judgement.

Cons

This applies for simple input types such as "number", "tel", "email" and so on, and if you are trying to create something more complex you might have to resort to adding and deleting class back and forth. But for simple things, simple answers :) .

Further reading

If you want to expand further this functionality you can always check this MDN article and create great and custom forms using the pattern, max-length, min-length and others.

Conclusion

If it wasn't for Puppertino I maybe wouldn't be searching on how to validate information of inputs with just CSS, but now that I know that, I'm pretty confident that I'm going to start using this in all my next projects. What are you thoughts on this amazing CSS selectors? Let me know down in the comments!