DEV Community

Enes Kılıç
Enes Kılıç

Posted on

Form Validation with CSS

In this post, I will show you how to validation the required form fields with CSS.

If you want to see full version of this project or all HTML-CSS projects look this Repository

Create HTML


    <!--==== Add required attribute to input tag  ====-->
    <input type="password" required />

    <button type="submit"> Login </button>

Enter fullscreen mode Exit fullscreen mode


form:invalid button {
  pointer-events: none;

form:valid button {
  pointer-events: initial;
Enter fullscreen mode Exit fullscreen mode

My output with some styles

Top comments (5)

lukeshiru profile image
Luke Shiru

I'll save the link to this post so every time someone tells me they need something like Formik for validation+user feedback, then I'll just show them this. Approaches like this will become even more crucial as frameworks like Remix grow in popularity.


iainsimmons profile image
Iain Simmons

Not exactly the same use case.

You can't do a basic "repeat password" validation with just HTML5 attributes.

But yeah, definitely agree that in many cases, people are too eager to reach for a JS library when things can be done natively in HTML and styled in CSS.

lukeshiru profile image
Luke Shiru • Edited

You need a line of JS for that, you're right. Basically "oninput" of the "password" you update the pattern of the "repeat password" input and you make both required. But yup, in that case you need a little bit of JS. I had to do it a while ago for another post as a showcase, here it is:

alvaromontoro profile image
Alvaro Montoro

pointer-events work nicely when there's a pointer/mouse... But keyboard users will love to have a word about this solution 😋

eboye profile image

Yup, discovered that few years ago. It's amazing feature. Great share!

And btw, it has amazing support: